Icon fonts or icon fonts help you give visual cues to your visiteurs. Technically they are small images embedded as characters in font files.

Prettier than bitmaps and fully responsive, they can be decorated and manipulated with CSS in the same way as fonts. In this regard, they are very easy to integrate into most websites, those designed under WordPress being no exception.

In this article, you'll make use of a plugin to add icons as features directly into your WYSIWYG editor, and finally for the more manual, we'll walk through the steps to include your favorite icon fonts in your theme.

Add icon fonts in your WYSIWYG editor

The easiest way to integrate icon fonts on your site is to install and activate the plugin. WP Visual Icon Fonts then visit Settings >> Icon Fonts. There you will have to choose between FontAwesome 4 (super pack of 369 icons) and Genericons (69 icons) which are the two fonts installed by default in the plugin. Finally, save your changes.

Now in your editor, just after the button Media you already know very well, you can see a button labeled Icon. Clicking on it will drop down a list containing all the icons contained in the icon font you selected earlier. The search filter lets you find the icon you want faster, instead of going through the entire list.

Note that you did more than add a button in your editor. You have just made an icon font available throughout the scope of your WordPress installation. This means that you can introduce icons wherever you are allowed to write HTML. And you can decorate them with CSS just like you would with fonts. But that you already knew.

Add icon fonts manually

For some reason, you might not want or be able to install plugins, and therefore have to embed your fonts manually. But before you get your hands dirty be warned of the danger of editing files from Themes.

It is strongly recommended NOT to modify the file functions.php or any other file in your theme because updating the theme will erase your changes or break your site. Instead, create a child theme or write a plugin specific to your site.

The procedure is almost the same for all icon fonts. So feel free to use your favorite font.

Download the zip archive of the icon font of your choice from the developer's website and upload it contents in a directory on your site. You could for example create a directory of the name of your font, for example my-favorite-cast, under the folder css of your theme.

Now you need to register your icon font with WordPress. To do this, add this at the end of the file functions.php of your theme.

//enregistrer la feuille de styles de votre fonte auprès de wordpress après upload
wp_enqueue_style('ma-fonte-favorite' ,get_stylesheet_directory_uri() . '/css/ma-fonte-favorite.css');
}
add_action('wp_enqueue_scripts', 'enqueue_icon_fonts_stylesheets');

 Be sure to replace my-favorite-cast by the name of the icon font of your choice. In the code block above, you declare the function enqueue_icon_fonts_stylesheets who makes use of the special function wp_enqueue_style to register your font style file with WordPress. Finally, using the special function add_action, you hook your function (for future execution) to the event wp_enqueue_scripts for the file . Css the font is added to the page header.

Note that if you don't want to upload files to your site, you can search to see if the icon font of your choice is hosted on a CDN. If so, your function enqueue_icon_fonts_stylesheets should look like this:


//example avec Fontawesome
//enregistrer la fonte auprès de wordpress via CDN
function enqueue_icon_fonts_stylesheets(){
wp_enqueue_style('font-awesome , '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
}
add_action('wp_enqueue_scripts', enqueue_icon_fonts_stylesheets ');

From this point on you can use your font as usual, or you can read the documentation on the developer's site.

With this method, you can add multiple icon fonts at once, which on the other hand can make your pages load more heavy. To remedy this problem you can use the power of services such as Fontello, Icomoon or even Flaticon that allow you to individually select icons in different existing fonts and compile them into a single font that you can later integrate into your site. So you can have the best of several fonts in one.

Now that you have installed icon fonts on your site, you might want to add to your site menu.