Font Awesome is an amazing icon-based font that contains compact-sized, but high quality scalable vector graphics that can be used to optimi...
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!
To use an icon, simply use the <i> tag as shown below.
<i class="fa fa-home"></i>
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.
<i class="fa fa-home fa-1g"></i>
<i class="fa fa-home fa-2x"></i>
<i class="fa fa-home fa-3x"></i>
<i class="fa fa-home fa-4x"></i>
<i class="fa fa-home fa-5x"></i>
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.
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
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.
<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-flip-horizontal"></i> <!--Flip Horizontally-->
<i class="fa fa-shield fa-flip-vertical"></i> <!--Flip Vertically-->
<i class="fa fa-shield fa-rotate-90"></i> <!--Rotate 90 Degrees Clockwise-->
<i class="fa fa-shield fa-rotate-180"></i> <!--Rotate 180 Degrees-->
<i class="fa fa-shield fa-rotate-270"></i> <!--Rotate 90 Degrees Anti-clockwise-->
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><i class="fa-li fa fa-home"></i>Home Icon</li>
<li><i class="fa-li fa fa-square"></i>Square Icon</li>
<li><i class="fa-li fa fa-check-square"></i>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.
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-check fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i><i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
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 :)
COMMENTS