Using Awesome Fonts with the Thesis Theme

Using Awesome Fonts with the Thesis Theme

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

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.

About the author: I’m a Software Engineer by trade and for a while I have been spending my time creating Websites and Blogs with Wordpress. I recently started to use the Thesis Framework and found only a few tutorials and help. So, I started this site to document what I learn and to share with others. I’m also available to help on a one to one basis for those that would like to work with me.

{ ( 0 comments… add one ) }

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.