You can integrate font icons through the Font Awesome and Glyphical Halflings libraries. These libraries allow you to embed icons as a link reference. You don't need any image files in the project.
Page Contents

Font icon options

The theme has two font icon sets integrated: Font Awesome and Glyphicons Halflings. The latter is part of Bootstrap, while the former is independent. Font icons allow you to insert icons drawn as vectors from a CDN (so you don’t have any local images on your own site).

See Font Awesome icons available

Go to the Font Awesome library to see the available icons.

The Font Awesome icons allow you to adjust their size by simply adding fa-2x, fa-3x and so forth as a class to the icon to adjust their size to two times or three times the original size. As vector icons, they scale crisply at any size.

Here’s an example of how to scale up a camera icon:

<i class="fa fa-camera-retro"></i> normal size (1x)
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

Here’s what they render to:

1x fa-lg fa-2x fa-3x fa-4x fa-5x

With Font Awesome, you always use the i tag with the appropriate class. You also implement fa as a base class first. You can use font awesome icons inside other elements. Here I’m using a Font Awesome class inside a Bootstrap alert:

<div class="alert alert-danger" role="alert"><i class="fa fa-exclamation-circle"></i> <b>Warning: </b>This is a special warning message.

Here’s the result:

Tags: contributing