Icon library

Winter provides an icon library with icons of various descriptions, based on the popular Font Awesome collection.

Inline icons

Place icons just about anywhere with the <i> tag or to an existing element using the wn- prefix.

<i class="icon-camera-retro"></i> icon-camera-retro

<span class="wn-icon-flag-checkered">wn-icon-flag-checkered</span>

Icon sizes

To increase icon sizes relative to their container, use the icon-lg (33% increase), icon-2x, icon-3x, icon-4x, or icon-5x classes.

<i class="icon-camera-retro icon-5x"></i> icon-5x
<i class="icon-camera-retro icon-4x"></i> icon-4x
<i class="icon-camera-retro icon-3x"></i> icon-3x
<i class="icon-camera-retro icon-2x"></i> icon-2x
<i class="icon-camera-retro icon-lg"></i> icon-lg

Icon buttons

Feel free to use them alongside your buttons.

<a class="btn btn-default wn-icon-refresh" href="#">
    Refresh
</a>
<a class="btn btn-success wn-icon-shopping" href="#">
    Checkout
</a>
<a class="btn btn-primary wn-icon-comment" href="#">
    Comment
</a>
<a class="btn btn-danger wn-icon-trash" href="#">
    Delete
</a>
<a class="btn btn-default wn-icon-cog" href="#">
    Settings
</a>
<a class="btn btn-info wn-icon-info" href="#">
    More Info
</a>

Available icons

Web Application Icons

Medical Icons

Text Editor Icons

Spinner Icons

File Type Icons

Directional Icons

Video Player Icons

Form Control Icons

Transportation Icons

Chart Icons

Brand Icons

Hand Icons

Payment Icons

Currency Icons

Accessibility Icons

Gender Icons