How To Customize Font Awesome Icons in Blogger?

Font Awesome is an amazing icon-based font that contains compact-sized, but high quality scalable vector graphics that can be used to optimize most icons across your site. We've talked about implementing Font Awesome Icons on your Blogger template (or any HTML webpage), and we saw that one of the best features about this iconic font is that it is CSS-customizable, which means you can use some pre-built classes, or write your own custom styles to fit your website! In this post, we'll talk about customizing these icons for your site.

Check out our other Font Awesome tutorial to get started with this awesome font!

How To Use Font Awesome Icons In Your Website?

To use an icon, simply use the tag as shown below.

You can change the highlighted part with the name of any other icon class you like. Here's a list of all available icons.

Customizing CSS

You can create new CSS rules for any of the pre-defined classes. For example;

.fa-home {
font-size: 32px;
color: #033;
padding: 8px;
border: 1px solid #000;
float:left;
}

Here's the icon before styling, and
here's the same icon after styling.

Sometimes, using CSS might not be the best way to do something. Font Awesome provides some additional features!

Resizing icons

To resize an icon by a constant factor, say two times or four times, simply add the rule as shown below.







Please note that not all icons can be resized this way.

Spinning icons

Just like when resizing icons, you can use a class called fa-spin to spin icons. Again, this only works well with a few icons, such as fa-cog and fa-refresh.

This should look as follows.

Change orientation

You can easily flip and rotate icons in a similar way. Here are the classes to be used.

normal

Lists

Don't like the default bullets and numberings of your lists? You can easily replace them with icons! Here's an example;

Home Icon
Square Icon
Checked Square Icon

Here's how to use icons in lists;

<ul class="fa-ul">
<li>Home Icon</li>
<li>Square Icon</li>
<li>Checked Square Icon</li>
</ul>

Stacking icons

Sometimes, it can be useful to combine two icons together to create a whole new icon. For example, a cross icon can be placed on a camera icon to signify that camera's are not allowed. You can combine many pairs of icons to form new ones. Here are a few examples.

This is how they're supposed to look.

This was it for now. If you need more tutorials, feel free to let us know in the comments section below, or follow through to the FA website for more help. All the best :)

Pin it

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Unknown 2/10/2014 CSS and HTMLTricks , How To