Tuesday, January 5, 2016

Font Awesome Shortcodes — Add Icons Easily!

By telangana.tuday.in on 8:08 AM No comments

Font Awesome Shortcodes — Add Icons Easily!

Posted: 05 Jan 2016 04:47 AM PST

Font Awesome Shortcodes Introduction 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!

DEMO

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:

Read: Blogger Shortcode Plugin Installation Steps

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:

Type Icon name inside name attribute. Full list of icon names can be found here.
Use size attribute to increase icon sizes relative to their container. Size values supported are lg (33% increase), 2x, 3x, 4x, and 5x.
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
Use the animation attribute to get any icon to spin, or to have the icon rotate with 8 steps by setting it to pulse.
To arbitrarily rotate icons, use the rotate attribute. Set value to following degree directions 90, 180, 270.
To flip icons vertically or horizontally use flip. Set value to either horizontal or vertical.
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.
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:

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! =)