Wordpress offer all the plugins that you need to have a stunning website that meet all the requirement of the modern web. Here, in this article we are going to share how to Properly use the Icons font in wordpress blog/website. As, there is the increasing trend in using the Font icons in web design and development because they offer lots of flexibility as compared to Image icons in the format of PNG and JPEG etc. No, doubt, Image icons are the most used in the website design but one can also use the font icons that are fully customizable just like the font. They are fully scalable as, you can easily change the font size, color and other CSS. You can find the different brands that offer such icons and you can use the one that is best perfect. Here, we are just using the Free Visiual icon fonts WordPress plugin that offer the all of Font awesome icons and Genericon.
You can see the trend about the icon fonts in the modern web design. Due to the ease and easy customization the developers prefers to use the vector icons so that they can look perfect in all media resolutions. If you are using the WordPress CMS then here in this article you will learn how to add icon fonts anywhere in your blog posts or template. It’s just easy with a simple installation of plugin. So, get started!
Install And Activate the Visual Icon fonts Plugin:
First thing is the installation and activation of Visual icon fonts plugin.Next navigate to settings >> icon fonts and choose the font that you want to use. you can choose the Fontawesome or Genricon that you think is perfect for you.
Add the icons in Posts:
You can use these icons in your posts, menu, footer or any place where you can use the fonts.To add icons in your post create new post or edit the existing one. You will notice the new icon button along with Add Media button. Click on this button and open the dropdown menu. The dropdown menu will show you all the available icons that you can use. Simply select the icon this will automatically add your selected menu in the post editor.
Add the icon font in theme:
you can place Font Awesome icons just about anywhere with the <i> tag.You can use the icon font at every place in your theme and posts. To use the icons in theme add the icon in post editor and switch to the Visual/HTML mode. Copy the icon code and paste it where you want to use in your theme.
If you are using the Font awesome then visit the icons list page select/ click the icon and copy the <i> tag. paste the <i> tag where you want to add the icon. Examples
Font awesome <i> tag examples.
<p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p>
<p><i class="fa fa-anchor"></i> fa-anchor</p>
<p><i class="fa fa-bars"></i> fa-bars</p>
<p><i class="fa fa-bookmark-o"></i> fa-bookmark-o</p>
<p><i class="fa fa-camera-retro fa-5x"></i> fa-camera-retro</p>
Styling The font icons:
The visual icon font is the best solution to add the vector icon in your post using the WordPress. There are lots of application, brand, file type, spinning, form control, currency icon, text editor icon, directional icons, video player icons and much more. So, with this just a simple plugin you can add unlimited icons in your post or template easily. Fully customization options i.e. you can change the color, size and other CSS properties as you wish.
we hope this article will help you if you are looking for how to add the icons font in wordpress. If you face any problem feel free to ask in comments. Thanks! (:
