Awesome Fonts, are, for want of another word awesome. Personally, I love them for the icons. I love using them to add icons on my page, in my posts, just adding that visual elements to the page.
The combination of Thesis Theme and Awesome can give you a fantastic look to you site.
In this quick tutorial I’m going to show you how to add and use Awesome fonts in Thesis.
Add fonts to your site
To begin, we need to add the Awesome Font Set to your site. You need to add a reference in the HTML Header. Please refer to the thesis tutorial post on using custom fonts.
The line of code you need to add to the HTML Head you get from the Awesome Fonts website. At the top of the page you enter your email and click the link to get the embedded code. An email is sent to you with the string you need to copy and paste into the HTML Head.
Once this link is added, you can now reference Awesome Fonts from your Custom CSS. There is not need to upload the font set or CSS as its all from this embedded link.
If you did want to add it all to your site, then instructions on how to do that are also on the linked page.
How to use Awesome Fonts on your site
You can reference Awesome Fonts from your Custom CSS or in posts on your site. If you search for a specific icon from their site, it gives you some HTML code. This works fine if you adding icons to your posts; however, I found it not to work very well in my Custom CSS. To add a font to an elements, I found using the Unicode equivalent for the icon for worked best.
Here’s a link to the Cheatsheet for the Unicode values.
I have used, as an example, the comment icon in my comment string.
Awesome Font Comment Icon
To do this, I added the following code to my Custom CSS.
Using this method, you can add icons to other elements on your page using your Custom CSS.
