Font Icons in Practice

After you've done the legwork of setting up your icon font, you can accomplish a lot of formerly complicated tasks fairly easily.

Including Font Icons in your Project - Font Import Voodoo

icomoon.io

@font-face { font-family: 'termina'; src: url('fonts/termina.eot'); }

[class^="icon-"], [class*=" icon-"] { font-family: 'termina'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; }

<span class='icon-simple-terminal'></span>

terminal

<span class='icon-terminal'>terminal</span>

.tiny {font-size: 3rem } .small {font-size: 7rem } .medium {font-size: 11rem } .large {font-size: 18rem }

terminal

.icon-terminal:hover { color: #D46C32; }

terminal

.icon-terminal { text-shadow: 6px 6px 12px #333333; }

terminal

.icon-terminal { background-color: #ece9d8; background-radius: 1em; }

Multicolor Icon Font

Emerging methods to solve the one problem with icon fonts - monotone is boring.

<span class="icon-terminal medium">terminal tshade tfill</span>

terminal

<span class="icon-multicolor-terminal">terminal</span>

.icon-multicolor-terminal { color: #414542; }

.icon-multicolor-terminal:after { content: "tshade"; color: #B3BCB5; opacity: 0.2; margin-left: -1em; }

.icon-multicolor-terminal:before { content: "tfill"; color: #858BBC; opacity: 1.0; margin-right: -1em; }

Variable Color Icons

Customization and variations on a theme

terminal terminal terminal

<span class="icon-multicolor-terminal red" >terminal</span> <span class="icon-multicolor-terminal blue" >terminal</span> <span class="icon-multicolor-terminal green">terminal</span>

.red:before { color: #BC6360; } .blue:before { color: #82A2BC; } .green:before { color: #82BC6A; }

nikolaswise.github.io/icon-font-samples