If you have a blogger template from Georgia Lou Studios or a WordPress blog, adding in any of the hundreds of icons from Font Awesome is a fun way to break up your posts just like I did in this post.
To get this coffee cup (or any of the hundreds of icons on Font Awesome), all you need is one line of code:
<i class=”fa fa-coffee fa-4x” style=”color: #94a2b0;”>
Here are the pieces you’ll want to change:
•fa fa-coffee
Visit Font Awesome to find the name of the icon you would like to use. Want a shopping cart? Change coffee to shopping-cart. Your code would now look like this:
<i class=”fa fa-shopping-cart fa-4x” style=”color: #94a2b0;”>
•fa-4x
This controls the size. Your options are fa-lg, fa-2x, fa-3x, fa-4x, and fa-5x. Want a larger shopping cart? Your new code would look like this:
<i class=”fa fa-shopping-cart fa-5x” style=”color: #94a2b0;”>
•94a2bo
This sets the color of the icon. You’ll want to use colors that match your branding. Not sure of the hex code for your site? Upload an image from your blog to Image Color Picker to find it. Upload an image or use your site’s address, then just click on the part that has the color you want.
If I wanted to use the turquoise that matches my site, my code would look like this:
<i class=”fa fa-shopping-cart fa-5x” style=”color: #aedad9;”>
Want to Center Your Icon?
If you want your icon centered on the page, you’ll need to add code to the beginning and end that tells your blog to do that:
<center><i class=”fa fa-shopping-cart fa-5x” style=”color: #aedad9;”></center>
Helpful Hints:
•When you add the code, the icon does not show up when you are in the post composing area. If you want to see how it looks, you will need to preview your post. I probably spent an hour on different tutorials because mine “wasn’t working”. It was there the whole time!
•It’s super glitchy in WP. You can’t add them in until after you’ve added all of your pictures. If you add a picture in after the icons, your icons disappear. Super annoying. I like using the AGP Font Awesome WordPress Collection plug-in. It adds the Font Awesome icons to your post editor, so you can add them easily. (See the little FA icon? You’ll just click there.)
You’ll make your selections (notice it uses font size for sizing options), and then either preview or insert. Another bonus? You can stay in the visual editor instead of having to switch over to HTML.
I think their dropdown is kind of a pain when I know what I want. I usually build the first one this way, then just copy and paste the line of short code the rest of the time. Then I can use the Font Awesome Cheatsheet to find the name of my icon and adjust it that way.
That’s it!
I love this idea! I’ve been trying it a few different types with no luck. There is no icon when I click preview after I add the code in the HTML setting and all the text below the new line of code is turned into italics. I’m not very familiar with code, so I tried to even copy and paste your example from this post into my post to see if it would work, and it wouldn’t. Any suggestions?
Try adding it in after you’ve finished the entire post. Sometimes when I make edits or add images in Blogger, it messes it up!