CSS-Customize Font Awesome Icons For Blogger

0
How to add customized CSS- Font Awesome Icons in Blogger
In this tutorial i'm going to explain how to customize Font Awesome Icons using css,you can use these icons as list style or anywhere you want it.We are also going to explain styling font awesome icons with fixed width.Font Awesome is an amazing vector graphics icon-based fonts that contains compact-sized,that can be used to optimize icons across your site. Font Awesome Icons best feature is that it is CSS customizable, you can also use pre-built classes of Font Awesome,or you can try your own custom styles for website.

List style Font Awesome Icons

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>Check Square icons</li>
  <li><i class="fa-li fa fa-dot-circle-o"></i>Dot Circle icons</li>
  <li><i class="fa-li fa fa-plus-circle"></i>Plus Circle icons</li>
  <li><i class="fa-li fa fa-square"></i>Square icons</li>
</ul>
Output:
font awesome icons list style bullets for blogger
These 4 icon's code display as a list style.

Resizing Font Awesome Icons

If you want to customize the font awesome icons you can use CSS code.Now,We are going to increase the Font size by using CSS.For increasing the size of font awesome icons use the below code.
<style>
.fa-ul{font-size:22px;}
</style>
<ul class="fa-ul">
   <li><i class="fa-li fa fa-check-square"></i>Check Square icons</li>
  <li><i class="fa-li fa fa-dot-circle-o"></i>Dot Circle icons</li>
  <li><i class="fa-li fa fa-plus-circle"></i>Plus Circle icons</li>
  <li><i class="fa-li fa fa-square"></i>Square icons</li>
</ul>
Output:
increase size of font awesome icons list style using css

Add Color To Font Awesome Icons using CSS

Now,If you want to add the Color on the list style font awesome icons,use the code below.
<style>
.fa-ul{font-size:22px;color:#FF3333;}
</style>
<ul class="fa-ul">
   <li><i class="fa-li fa fa-check-square"></i>Check Square icons</li>
  <li><i class="fa-li fa fa-dot-circle-o"></i>Dot Circle icons</li>
  <li><i class="fa-li fa fa-plus-circle"></i>Plus Circle icons</li>
  <li><i class="fa-li fa fa-square"></i>Square icons</li>
</ul>
Output:
add color to font awesome icons list style with using css

Font Awesome icons with fixed width

Add Font Awesome Icons with fixed width.means each and every icons have same distance from one to another.
<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>
Output:
Add Font awesome icons with fixed with
  • fa-fw to set icons at a fixed width.

Spinning Icons

you can use a class fa-spin to spin icons.works with few icons,like fa-cog and fa-refresh.
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
Output:

Change Orientation

You can flip and rotate Font Awesome icons.
<i class="fa fa-shield"></i>&nbsp; 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-->

Stacking icons

To combine two icons together to create a  new font awesome icon.
<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>
Output:
how to add Stacking font awesome icons in blogger
If you need any help related to Font Awesome Icons feel free to ask.

how to add customize css font awesome icons,add color increase sixe of font awesome icons in blogger for blogspot websites,stacking icons,list style,spinning icons css code
In this tutorial i'm going to explain how to customize Font Awesome Icons using css,you can ...
SUMMARY

how to add customize css font awesome icons,add color increase sixe of font awesome icons in blogger for blogspot websites,stacking icons,list style,spinning icons css code

You Might Also Like:

We hope this article helped you to learn CSS-Customize Font Awesome Icons For Blogger. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "CSS-Customize Font Awesome Icons For Blogger" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand