Recent websites are focused on design and nice look. For a long time, designers and developers have used to create images or sprite-sheets for placing icons on the website. Some of them are still doing it. But now we have better and ready-made option which are fonts with icons. The essential advantage is the responsive support which reflects in a user-friendly appearance on every mobile device.

What is Font Awesome icon?

It's a special font with icons instead of letters, numbers etc. You don't have to use images or sprite-sheets anymore. Font Awesome is fully customizable and responsive.

Advantages

• icons can be scaled without loosing quality
• icons can be positioned and manipulated like you want
• icons have support for every browser, even IE6!
• icons are well created and nice
• icons are updated and the new ones are added frequently
  
  

Disadvantages

• subtle differences between operating systems and browsers
• there may be no icon that will match your purpose
  
  

How to use Font Awesome icon in a WordPress theme?

You can use embed for awesome icon with a dedicated WorPress plugin or avoid overloading your WordPress site with plugins simply add custom code with a font awesome to your Wordpress theme.

If you want to add it your theme add declaration into your functions.php file:

function pe_fontawesome(){
   wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); 
}
add_action('wp_enqueue_scripts','pe_fontawesome');

If you want to embed Font Awesome in your theme please download ZIP package. Then unzip it. There any fonts files and CSS files. Copy folder fonts to your theme directory and file font-awesome.min.css to CSS directory inside your theme (please create this folder if it does not exist). Now add this code to your functions.php:

function pe_fontawesome_local(){
	wp_enqueue_style('font-awesome', get_stylesheet_directory_uri() . '/css/font-awesome.min.css'); 
}
add_action('wp_enqueue_scripts','pe_fontawesome_local');

How to use Font Awesome (basic)

The simplest method is to add a special class to an HTML element. This method will generate pseudoclass for before/after of this HTML element. The best way is using elements i or span.

You need to add class fa and other class for the specific icon, ex. fa-user. Please check out this example:

<i class="fa fa-user"></i>

This will generate icon like this:

Shortcode for Font Awesome

There is a simple example of use Font Awesome in a shortcode. Please take a look at this shortcode's code.

add_shortcode('fa', 'pe_fa');
if ( !function_exists('pe_fa') ) {
	function pe_fa( $atts, $content ) {
		$a = shortcode_atts(
			array(
				'class' => '',
				'title' => '',
				'desc' => '',
			), $atts);

		$class = esc_attr( $a['class'] );
		$title = esc_attr( $a['title'] );
		$desc = esc_attr( $a['desc'] );

		$html = '';
		$html .= '<span class="fa fa-3x ' . $class . '" aria-hidden="true" style="float: left; margin: 0 10px 5px 0;"></span>';
		$html .= '<span class="pe-title" style="display: block; font-size: 2em;">' . $title . '</span>';
		$html .= '<span class="pe-desc" style="display: block;">' . $desc . '</span>';

		return $html;
	}
}

if( ! function_exists('pe_styles') ) {
	function pe_styles() {
		wp_enqueue_style( 'fontawesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', '4.7.0' );
	}
}
add_action( 'wp_enqueue_scripts', 'pe_styles' );

There is a declaration of shortcode with Font Awesome icon, of course, title and description. At the bottom, there is an action that loads Font Awesome CSS.

Please take a look at shortcode's usage:

[fa class="fa-user" title="title example 1" desc="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"]

Live preview, see simple examples of the above shortcode

Thanks for reading and remember to share/rate the content if you like it!