Top

Icons

Inside shortcodes

Float is packaged with a collection of beautifully designed icons that can be used within your content via the following shortcodes:

  • Lightboxes
  • Progress Bars
  • Count
  • iBox

To use Float's icons within these shortcodes, you'll need to insert the icon name within the icon attribute of each shortcode. You can find a full list of icon names in the icon-guide.html file, located within the guides/icon-guide folder, of your download.

In this guide, you'll see that each icon name is prefixed with icon-. When inserting the icon name within a shortcode, you need to remove the prefix and just include the unique name after the prefix. For example, inserting the icon-mail icon into the Progress bar shortcode will look as follows:

[po_progress title="Title" icon="mail" value="88"]

As you can see, the icon- prefix was removed and only mail was inserted.

Inside HTML

Icons can also be inserting within html elements via classes when adding custom HTML to Float. The icon names with the prefix included should be used as class names.

<span class="icon-mail"></span>

Inside CSS

You can also add icons via custom CSS, by using the the font name (po-font) and the four character codes that appear below each icon in the guide.

.example::before
{
  font-family: 'po-font';
  content:'\e002';
}
Customer support is not offered for anything relating to HTML or CSS modifications. Any changes made to the theme as a result of these modifications will be outside the scope of our customer support.

Powered by Pixelsmile