Icon Lab

This is a lab space for Font-Awesome icons used in shortcodes.

 

[icon image="lightbulb" size="small" cont="yes" float="none"]

You can edit any of the fields inside these brackets with normal CSS to your taste:

  • set the icon to anything you like from the theme_name/css/font-awesome.min.css
  • the float can be LEFT, RIGHT, or NONE
  • cont (which means container) can be set to NO or YES

Let’s see another example from the Font-Awesome file:

Behind the scenes, these icons look like this:

[icon image="envelope-alt" size="small" cont="yes" float="left"]

[icon image="th-large" size="small" cont="yes" float="left"]
[icon image="headphones" size="small" cont="yes" float="left"]

Note

These shortcodes only work in certain themes within the WordPress framework. We’re using FlexForm, and the Font-Awesome CSS library is therein included. If you are having trouble with these shortcodes, please check your theme guide to make sure that shortcodes are supported.


How do I know which icons I can use? How do I troubleshoot broken shortcodes?

Trial and error, mostly!

Consider our shortcode:
[icon image="lightbulb" size="small" cont="yes" float="none"]

Which references this in our stylesheet:

.icon-lightbulb:before{content:"\f0eb";}

we can see that the shortcode (which includes the [icon command) automatically inserts the .icon-portion of the element in displaying the lightbulb character. We insert the customized text as simply the character name we want.

  • lightbult
  • headphones
  • umbrella

or whatever else you want instead!