Font Awesome Shortcodes — Add Icons Easily!


Font Awesome ShortcodesIntroduction of Shortcodes Plugin for Blogger blogs was our biggest contribution to Blogspot community last year and to make sure we continue providing free support and development to the plugin, we are releasing some new shortcodes to make your content writing hobby even more worthwhile in 2016. Today we are releasing Font Awesome Icons Shortcodes, that will help you add FontAwesome Icons anywhere on your blog with a simple one liner textual code. You can now add FontAwesome vector icons inside Blog posts, sidebar content, sidebar headlines, header description and exclusively inside blogger comments box! The plugin includes the latest dynamically updated github source link to fontawesome library to make sure your blog keeps supporting all new icons and aliases added in the official icons directory. Lets first see its demo in action!

Note: The premium version of this shortcode plugin works with any CMS platform like WordPress, joomla, drupal or any HTML site. Contact us for a quotation.

1. Install Blogger Shortcode Plugin

In order to use FontAwesome shortcode you must first install the shortcode plugin for your blogger blog by following 7 easy steps shared inside the link below:

Skip installing this plugin if you have already added it in your blogspot template

2. How To Add Font Awesome Shortcode?

With this shortcode, you will be able to customize your icons in 8 different ways.

STYLE DEMO SHORTCODE
Flip it:
[icon name="youtube" flip="vertical"/]
Pulse it:
[icon name="spinner" animation="pulse"/]
Rotate it:
[icon name="thumbs-up" rotate="90"/]
Resize it:
[icon name="tag" size="3x"/]
Spin it:
[icon name="cog" animation="spin"/] 
Link it:
<a href="#">[icon name="home"/]</a>
Color it:
[icon name="shopping-cart" color="#65C002"/]
Give Fix Width:
[icon name="users" fix="fw"/]

The third column above shows the syntax on how to write down your Icon Shortcode. You can add it easily in both compose mode or Source/HTML mode of your blogger editor. Lets discuss the attributes in detail:

  1. Type Icon name inside name attribute. Full list of icon names can be found here.
  2. Use size attribute to increase icon sizes relative to their container. Size values supported are lg (33% increase), 2x, 3x, 4x, and 5x.
  3. Use fix to set icons at a fixed width. Useful when different icon widths go off alignment. Especially useful in things like nav lists & list groups. Set value as fw
  4. Use the animation attribute to get any icon to spin, or to have the icon rotate with 8 steps by setting it to pulse.
  5. To arbitrarily rotate icons, use the rotate attribute. Set value to following degree directions 90, 180, 270.
  6. To flip icons vertically or horizontally use flip. Set value to either horizontal or vertical.
  7. To change color of icon use color attribute. You can use web standard color names by simply typing orange, red, blue etc or you can use hexadecimal color codes.
  8. To hyperlink an icon simply enclose the shortcode inside href a tags.

You can also use the icons inside the other shortcodes list that we shared. For example to create a button with facebook, twitter, google-plus icon inside it, we will simply use button shortcode followed by Fontawesome shortcode.

INPUT:

[button size="medium" color="fb"] [icon name="facebook"/] Like [/button]
[button size="medium" color="blue"] [icon name="twitter"/] Follow [/button]
[button size="medium" color="red"] [icon name="google-plus"/] Follow [/button]

OUTPUT:

buttons created using fontawesome shortcode

Wasn't that easy? =)

Need Help?

I hope you find this most demanded FontAwesome shortcode useful for your content writing and blogging hobby. Let me know if you needed any help in understanding any part of the above tutorial. Feel free to leave your precious feedback. Peace and blessings buddies! =)

Need Quick Help within 24 Hours? ASK NOW



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 »

14 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. Awesome Post Man! You Did It! Keep Up The Work :D
    Your Blogger Fan Since 2012
    - Abdul Samad
    Blogging Crave

    ReplyDelete
    Replies
    1. Thank you for the lovely feedback Abdul. Means a lot. =)

      Note: Kindly avoid adding links in signature

      Delete
  2. Awesome article... Please share custom html sitemap generator plugin or shortcode or js.. like sora mag template provide... BTW, You are Rocking...

    ReplyDelete
  3. Wow brother. It was excellent. Mainly the options that you made. Thanks. I am going to use it. :)

    Regards,
    Shivansh Verma

    ReplyDelete
    Replies
    1. Thank you for the kind feedback dear Shivansh.

      Too much spam on the forum, where are you to look after the forum? =D

      Delete
    2. Thanks for noticing brother. Actually, I am, these days, struggling with my studies [my board exams are coming]. So, I hardly get time to write posts or even open forum. :(

      By the way, I am very happy to see the notification bar again. And thank you that you removed limk. I was so irritated and that's the thing, my one of the visitor said that's why, I also removed it.

      Regards,
      Shivansh Verma

      Delete
    3. Oh I get it now buddy. Wish you all the best with your exams and do come back with shining results! =)

      About that bar, it was an AD buddy. Thank you for your feedback, I will be careful in choosing AD spots next time. =)

      Delete
  4. Hello Sir I looked it but above comment i said HTML sitemap not xml format which is submitted via GWT. please reply with a decent post or link... and read comment carefully? :(

    ReplyDelete
    Replies
    1. I got your point I guess you are referring to "Table Of Contents". I have released one such HTML sitemap before that you can use. Please read this tutorial:

      Create Table Of Contents for your blog

      Delete
  5. How come you have 4 Ads on one Page, Isn't three on a single page ? o.0 I'm confused....

    ReplyDelete
    Replies
    1. Google has granted us additional privileges using a custom tag :)

      Delete
  6. Yhank you very much my firne @Mohammad..keep in touch.

    ReplyDelete