How to Easily Install Awesome Font Icons into your WordPress

Awesome fonts will let you embed social media icons, symbols, shapes, and fonts into WordPress post easily. You don’t need to embed or attached any images, all you have to do is to learn a trick. This article will help you install Awesome Fonts into your WordPress.

See examples here.

entypo font awesome

So let’s get started.

Step1. Download from their official site here and extract.

Step2. Copying and Uploading

Copy and Upload css and font folder into your wordpress theme directory e.g. /wp-content/themes/your-theme/awesome/

Note: /awesome/ you can create your own folder/directory

awesome css fonts

Step3. In your function.php add these following lines.

if ( !function_exists( 'awesome_fonts_css' ) ) {

		function awesome_fonts_css() {
			wp_enqueue_style( 'font-awesome-id', get_template_directory_uri() . '/awesome/css/font-awesome.min.css', false, '3.2.1' );		
		}
}
if (!is_admin())
		add_action('wp_enqueue_scripts', 'awesome_fonts_css');

Optional:
If you want IE7 support, add this few lines in the header.php just after !Doctype declaration.

<!--[if IE 7 ]>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/awesome/css/font-awesome-ie7.min.css">
<![endif]-->

Step 4. Testing Add New Post Text view (not Visual) add these following lines

<a class="btn" href="#">
  <i class="icon-repeat"></i> Reload</a>
<a class="btn btn-success" href="#">
  <i class="icon-shopping-cart icon-large"></i> Checkout</a>
<a class="btn btn-large btn-primary" href="#">
  <i class="icon-comment"></i> Comment</a>
<a class="btn btn-small btn-info" href="#">
  <i class="icon-info-sign"></i> Info</a>
<a class="btn btn-danger" href="#">
  <i class="icon-trash icon-large"></i> Delete</a>
<a class="btn btn-small" href="#">
  <i class="icon-cog"></i> Settings</a>
<a class="btn btn-large btn-danger" href="#">
  <i class="icon-flag icon-2x pull-left"></i> Font Awesome
Version 3.2.1</a>
<a class="btn btn-primary" href="#">
  <i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>

Great job! You have successfully installed it. You can get some more examples at

http://fortawesome.github.io/Font-Awesome/examples/

There are many font-face tricks in the internet, I like also Entypo 250+ carefully crafted pictograms, you can also play on that using the same method. Also check the compatibility across browsers for the finest showcasing it.

Although there is a plugin that you can play relating to this feature called FontAwesomeIcons, but our main goal here is to make our WP codes clean and free from excessive files that might cause your page’s slow loading time.

How to Easily Install Awesome Font Icons into your WordPress3.00/5 (60.00%) 2 votes
About

Elvin is one of the contributors of InnoveDesigns.com. He has been creating Wordpress Plugins, Magento Extensions, & Mobile Applications. If you find this article useful, please Follow him on .

Tagged with: , ,
Published under HTML5, Web Design Guide, Wordpress