Icon fonts are vector icons used as fonts. They are popular among web designers because they look prettier than bitmap images. They can be resized without losing quality and styled using CSS. This is why many WordPress themes use icon fonts. Most notably, the default Twenty Thirteen and Twenty Fourteen themes. However for beginners, it is a little complicated to use icon fonts on their WordPress sites. In this article, we will show you how to use icon fonts in WordPress post editor without writing any HTML or CSS.
Video Tutorial
If you don’t like the video or need more instructions, then continue reading.
First thing you need to do is install and activate the WP Visual Icon Fonts plugin. Upon activation, you need to go to Settings » Icon Fonts to choose an icon font set. Currently, the plugin comes with Font Awesome and Genericon fonts.
After choosing a font, you can now use it with in your WordPress posts, pages, custom post types, and even in your theme’s template files. To use icon fonts you need to create or edit a post, and you will notice an Icons button next to the Add Media button. Clicking on the icons button will open a drop down menu of all the icons available in the icon font set. Selecting an icon from this drop down menu will insert the icon in the post editor.
You can also change the font size and color using the buttons in the visual editor.
To use an icon in your theme, the easiest way to generate the required HTML is to add an icon font in post editor and then switch to Text editor to copy the HTML code. Paste it in your template files where you want to display an icon font.
Icon fonts can be used to create beautiful landing pages in WordPress without using images. They can also be used to highlight different sections of a long form article or post. This plugin brings you 369 icons with Font Awesome and 62 icons with Genericon font.
We hope this article helped you add awesome icon fonts in WordPress. Let us know how you intend to use icon fonts in your WordPress projects by leaving a comment below.
