Styling Font Awesome Icons with List and Fixed Width
Styling Font Awesome Icons with List and Fixed Width
For the massive usage
of Font Awesome icons on Blogger template, Blog Designer should know how to use
it. Font Awesome Icon can be use as a
single icon and if you want to use the icons as list style then you have to be
little tricky and similarly if you want to use Font Awesome Icons with fixed
width then you have to tailor the icon code differently. So in this tutorial I
will show you the way about assigning the Font Awesome Icon list and Fixed
width style.
List style Font Awesome Icon
For stylish Font Awesome Icon as list style just use the
below code block-
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-dot-circle-o"></i>can be used</li>
<li><i class="fa-li fa fa-plus-circle"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
Here I have added 4 icon's code which will be display as
list style. Also used fa-ul and fa-li to easily replace default bullets
in unordered lists. If you want to tweak the code then you can use CSS code to
give it different shape. For example I will increase the Font size at a time by
using CSS code-
For increasing Font Awesome Icon size just use the below code
block-
<style>
.fa-ul{font-size:22px;}
</style>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-dot-circle-o"></i>can be used</li>
<li><i class="fa-li fa fa-plus-circle"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
If you wish to add some color then simply use below code-
<style>
.fa-ul{font-size:22px;color:#F90101;}
</style>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-dot-circle-o"></i>can be used</li>
<li><i class="fa-li fa fa-plus-circle"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
Here I have added color:#F90101; code for changing the
icons and font color. And font size is font-size:22px;
So Now we will easily able to add Font Awesome icons by
list style.
Adding Font Awesome Icon with Fixed width style
This is another way where we can use Font Awesome Icon
with fixed width style. That means each and every icon will have same distance
from one to another. I have used the below code block-
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>
Here I have used fa-fw
to set icons at a fixed width. Great to use when different icon widths throw
off alignment. Especially useful in things like nav lists & list groups.
This list group can be used as Template Menu. You can replace all # with any URL for
navigation. Similarly by adding CSS code
you can easily tweak the icons. I hope you have understood the tutorial and
able to implement in your template design.
5 comments