Visual Icon fonts, also knows as genricons and vector icons are used as font icons popularly among web designers, the icons are lightweight and looks much better than simple bitmap images. There are many advantages like the icons can be resized without losing the quality and can be styled with CSS which cannot be done with image icons. This tutorial explains how you can use these iconic fonts using default WordPress visual editor present in add new & edit content pages, and the best thing is that you don’t need any HTML or CSS coding as everything is done visually.
Install and activate the WP Visual Icon Fonts plugin. After activation visit your admin area Dashboard -> Settings » Icon Fonts page and choose an icon font set. Now you can now use the font into your posts, pages and other custom post types or in your theme’s template files.
For using icon fonts first create a new post or page or open any old post for editing. In visual editor you will be noticing an ‘Icons’ button right next to Add Media button. Click the icons button and a drop down menu will show up from where you can select and insert the icons.
For using icons in your theme template files, first generate the HTML from the post editor. Now switch from Visual to Text editor mode, copy the HTML code and use it in your theme files wherever you like displaying the icon font.