Avatars

Basic

Use .c-avatar to show an avatar image.

img.c-avatar src="image.png"

<img class="c-avatar" src="image.png" />

You can add this class to the icons.

i.kzicon.kzicon-profile.c-avatar

<i class="kzicon kzicon-profile c-avatar"></i>

Options

If you need an avatar with white background, please use .-bg-white class.

sass:
  .example-area
    display: inline-block
    background-color: #f2f6fa
    padding: 20px

.example-area
  i.kzicon.kzicon-profile.c-avatar.-bg-white

<style type="text/css">
  .example-area {
    display: inline-block;
    background-color: #f2f6fa;
    padding: 20px;
  }
</style>
<div class="example-area">
  <i class="kzicon kzicon-profile c-avatar -bg-white"></i>
</div>

If you need an avatar with transparent background, please use .-bg-transparent class.

.example-area
  i.kzicon.kzicon-profile.c-avatar.-bg-transparent

<div class="example-area">
  <i class="kzicon kzicon-profile c-avatar -bg-transparent"></i>
</div>

If you need a dark colord avatar, please use .-bg-dark class.

i.kzicon.kzicon-profile.c-avatar.-bg-dark

<i class="kzicon kzicon-profile c-avatar -bg-dark"></i>

Sizes

Add .-size-small, .-size-large or .-size-original class if you need to change sizes.

p
  img.c-avatar.-size-small src="image.png"
  i.kzicon.kzicon-profile.c-avatar.-size-small

p
  img.c-avatar src="image.png"
  i.kzicon.kzicon-profile.c-avatar

p
  img.c-avatar.-size-large src="image.png"
  i.kzicon.kzicon-profile.c-avatar.-size-large

p
  img.c-avatar.-size-original src="image.png"
  i.kzicon.kzicon-profile.c-avatar.-size-original

<p>
  <img class="c-avatar -size-small" src="image.png" /><i class="kzicon kzicon-profile c-avatar -size-small"></i>
</p>
<p>
  <img class="c-avatar" src="image.png" /><i class="kzicon kzicon-profile c-avatar"></i>
</p>
<p>
  <img class="c-avatar -size-large" src="image.png" /><i class="kzicon kzicon-profile c-avatar -size-large"></i>
</p>
<p>
  <img class="c-avatar -size-original" src="image.png" /><i class="kzicon kzicon-profile c-avatar -size-original"></i>
</p>