askdesign
10/23/2015 - 10:45 PM

Using Font Awesome in WordPress

/* --- show font awesome icon before widget title --- */
#meta-3 .widget-title:before {
	font-family: FontAwesome;
	padding-right: 7px;
	content: "\f05a";
	font-style: normal;
	font-weight: normal;
	text-decoration: inherit;
}
/* --- show font awesome icons before menu items in nav bar --- */
/* --- Unicode values can be obtained by on the icon detail page. --- */
.menu-primary li a:before {
	font-family: FontAwesome;
	padding-right: 7px;
	/*font-style: normal;
	font-weight: normal;
	text-decoration: inherit;*/
}

/* Home menu item */
#menu-item-1616 a:before {
	content: "\f015";
}

/* Pages menu item */
#menu-item-1413 a:before {
	content: "\f0e8";
}

/* Categories menu item */
#menu-item-1414 a:before {
	content: "\f15b";
}
// To load Font Awesome, add the following in child theme’s functions.php:
// Load Font Awesome
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {

	wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' );
}

<i class="fa fa-phone"></i> +91 1234567890
/* --- an example of css code for font awesome --- */
.fa-phone {
	font-size: 25px;
	vertical-align: middle;
	padding-right: 5px;
}