Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
Below are currently all available icons.
Add the following CSS into your custom CSS, this will allow your icon lists to display the icons with no additional styling.
.the-icons {
margin-left: 0;
list-style: none;
}
Place Font Awesome icons just about anywhere with the <i>
tag.
<div style="font-size: 24px;">
<i class="icon icon-coffee"></i> icon-coffee
</div>
<p><i class="icon icon-camera-retro icon-large"></i> icon-camera-retro</p>
<p><i class="icon icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon icon-camera-retro icon-4x"></i> icon-camera-retro</p>
icon-camera-retro
icon-camera-retro
icon-camera-retro
icon-camera-retro
[pl_button type="primary" link="" size="large" target="blank"]
<i class="icon-refresh icon-spin"></i> Icon Button
[/pl_button]
<ul class="icons-ul">
<li><i class="icon icon-li icon-ok"></i>Bulleted lists (like this one)</li>
<li><i class="icon icon-li icon-ok"></i>Buttons</li>
<li><i class="icon icon-li icon-ok"></i>Button groups</li>
<li><i class="icon icon-li icon-ok"></i>Navigation</li>
<li><i class="icon icon-li icon-ok"></i>Prepended form inputs</li>
<li><i class="icon icon-li icon-ok"></i>…and many more with custom CSS</li>
</ul>
For more examples, please visit Font Awesome