Zusty CSS Logo
Zusty CSS Logo
Version 1.2.0 is out now. Check out Release Notes.

Avatar

Avatar for displaying as profile picture.


Structure

FX
<span class="zust-avatar">FX</span>


Colors

Avatar has all theme colors. Use any of them.

SMSMSMSMSM
<span class="zust-avatar zust-primary">SM</span>
<span class="zust-avatar zust-success">SM</span>
<span class="zust-avatar zust-warning">SM</span>
<span class="zust-avatar zust-error">SM</span>
<span class="zust-avatar zust-link">SM</span>


Sizes

There are extra two sizes, use them by adding class zust-large or zust-small.

SMNMLG
<span class="zust-avatar zust-link zust-small">SM</span>
<span class="zust-avatar zust-link">NM</span>
<span class="zust-avatar zust-link zust-large">LG</span>


Icon

You can even put icon in avatar.

face
<span class="zust-avatar zust-primary">
  <span class="zust-icon">
    <i class="material-icons">face</i>
  </span>
</span>

Image

You can put image inside of an avatar.

<span class="zust-avatar zust-primary">
  <img src="/resources/profile.png">
</span>

checkSuccessfully Copied

Get involved in improving Zusty CSS.

Report a BugFeature Request

Support us by

Starring it on GitHubJoining our Discord ServerSharing on Twitter

Rapid Search Inside of Docs

Zusty Pages are Now Available offline.
New or Updated content available.  Refreshing...

Choose Editor