Font Awesome
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.
Icon list
Below are currently all available icons.
Web Application
Currency Icons
Text Icons
Directional Icons
Video Player Icons
Brand Icons
- All brand icons are trademarks of their respective owners.
- The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, PageLines, nor vice versa.
Medical Icons
CSS
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;
}
Examples
Place Font Awesome icons just about anywhere with the <i> tag.
Inline Icons
<div style="font-size: 24px;">
<i class="icon icon-coffee"></i> icon-coffee
</div>
icon-coffee
Larger Icons
<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
Buttons
[pl_button type="primary" link="" size="large" target="blank"]
<i class="icon-refresh icon-spin"></i> Icon Button
[/pl_button]
Bulleted Lists
<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>
- Bulleted lists (like this one)
- Buttons
- Button groups
- Navigation
- Prepended form inputs
- …and many more with custom CSS
For more examples, please visit Font Awesome