Content Icons

As you saw in the online preview, the theme displays some icons in a few places. You can use these as well, by simply writting a bit of custom HTML. The theme has the entire Font Awesome library packed in, so you can use anything from the library in your website.

To insert icons you need to switch into the HTML viewer when editing a page.

Here's how a basic icon looks like in code:

<i class="fa fa-diamond fa-3x" style="color: #1d1d1d;"></i>

Let's see a breakdown of this:

The <i> node is the icon object, which can be inserted anywhere.. It has a few base classes, and in our example we have:

  • fa-diamond is the icon's class name. fa- is a constant, while diamond is the actual icon's name. To get a list of all icon names, visit this link: http://fontawesome.io/icons/
  • fa-3x represents the icon's size. Possible values are: fa-lg, fa-2x, fa-3x, fa-4x, fa-5x, or nothing.

The color is applied using a custom style rule, and you can use absolutely any hexadecimal values in there.

For more examples please head over to the official Font Awesome documentation page: http://fontawesome.io/examples/