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. It is a little complicated to use icon fonts on their WordPress sites for beginners. In this article, we will show you how to use icon fonts in WordPress post editor without writing any HTML or CSS.
Includes Icon fonts Font Awesome 4 (369 Icons)
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
Includes Genericons Set (62 Icons)
Genericons are vector icons embedded in a webfont designed to be clean and simple keeping with a generic aesthetic. Use genericons for instant HiDPI, to change icon colors on the fly, or even with CSS effects such as drop-shadows or gradients!
- Simple option to select the icon font family you prefer
- Easily select an icon in the visual editor window
- Search and instantly Filter through the icons to get the one you want quickly
- See the icons in the visual editor
- Adjust the colour and size of the icons (and any other text elements in the editor)
- Includes Font Awesome 4
- Includes Genericons
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.