Circular Background Font Awesome Icons

I am using Font Awesome on my latest Genesis theme Forest. Font Awesome gives you scalable vector icons that can be customized instantly — size, color, drop shadow, and anything that can be done using CSS. You can add Font Awesome to your Genesis child theme by including the following lines to your child theme’s functions.php.

For my theme, I want the Font Awesome icons to appear on a circular background, such as in this screenshot.

The upcoming Forest theme is a premium theme and not tailor-made. Therefore, the user has to be able to change the icons fairly easy. The four circles in the Forest theme are text widgets. The user has to add to the text widget the following content only:

The first line is the HTML, which represents the selected icon. All the icons can be found here. The <i> tag for the icons can be found on the icon page. For example: the <i> tag of the selected tree icon can be found here. The second line is the title of the widget. The last line(s) is (are) the content. So: the only thing the user has to do is pick an icon on Font Awesome and copy paste the <i> tag into the text widget.

If accessibility support is activated in your child theme you have to change the HTML markup of the first line into:

Edit the text within the second span so it matches the title of the content.

Without any styling you only see the icons. Add the following CSS to the stylesheet of your Genesis child theme:

You may not want to display the circles in every text widget. In this case, add another class or ID to the CSS. You can change the size of the circles by editing the font-size, height and width. These values must be the same to keep the circle round, unless you want to end up with an ellipse :).

That’s all to it folks!