Using Font Awesome in WordPress

Version 4.1.0 of Font Awesome has been released recently and it’s time for a refresher on how we can use icon fonts in WordPress.

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/latest/css/font-awesome.min.css' );
	}

view raw functions.php hosted with by GitHub

Below are a few examples of using Font Awesome icons in various places.

Within content

In Page/Post editor when in Text mode,

<i class="fa fa-phone"></i> +91 1234567890

view raw gistfile1.html hosted with by GitHub

	.fa-phone {
	font-size: 25px;
	vertical-align: middle;
	padding-right: 5px;
	}

view raw gistfile2.css hosted with by GitHub

List of icons can be seen at http://fontawesome.io/icons/.

Nav menu items

	.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";
	}

view raw gistfile3.css hosted with by GitHub

Unicode values can be obtained by on the icon detail page.

Widget title

	#meta-3 .widget-title:before {
	font-family: FontAwesome;
	padding-right: 7px;
	content: "\f05a";
	font-style: normal;
	font-weight: normal;
	text-decoration: inherit;
	}

view raw gistfile4.css hosted with by GitHub

Also see Font Awesome icons with a circular background.