How to Easily Add Icon Fonts in Your WooCommerce Theme
Using special fonts for displaying icons is the popular trend in modern web design, which is used in many WooCommerce themes. Further we will talk about how to use special fonts to create icons in your WooCommerce template.
Adding icon fonts in WooCommerce themes
In fact, this is a font full of icons created. Similar fonts you probably already have seen in the format or Webdings Windings. Only in modern font for icon design is more adapted and displays the logos of social media, smartphones and characters from basket orders (this is called only if the base characters and symbols).
Most of these icons have certain fonts - both vector and embedded directly into the pages on WooCommerce themes. The advantage of using them is that they are loaded faster than conventional pictures better suited to an adaptive layout and more organic look with any type of color scheme on the site.
Using the right fonts for the icons on WooCommerce themes
Now that you understand the basic idea and purpose of the font icon, go to the way these fonts are used, and where to find them for your WordPress site.
The first step is that you will find the right font or you can create your own icons in the set of those who need you. And you can install the plugin that will do most of the work for you and help you start quickly with this new font for the site’s icons.
Most fonts to create icons on the websites of the menu are free, and therefore their use is possible for a wide audience, even for those who apply premium WooCommerce themes. Here are the most popular options:
Font Awesome
Font Awesome is one of the most popular font sets for the formation of icons contains about 360+ icons that you can use for free. The font that isly updated with new symbols and pictograms. All icons in the composition of the font can be divided into several main groups:
Web application icons;
Currency and money;
Icon text editors;
Indices;
Video players;
Icons brands;
Icons medical subjects.
Depending on the theme of the site, you can choose one or another icon. One of the problems associated with the use of such fonts - is compatible with screens of different devices and different operating systems.
The use of such fonts in WooCommerce templates possible including through free plug Font Awesome Icons, which allows you to insert icons in the posts and pages using short codes.
To insert icons references short code of the icon symbol that you want to add:
[icon name = icon-pencil]
It is also possible to use:
<i class = "icon-home"> </ i>
By using the plugin Font Awesome Menus, you can add icons and menu navigation WordPress, as well as posts and pages. To add icons simply add 'icon-iconname' in the field 'CSS Classes' in the menu.
Genericons
Genericons is a free GPL-font for icons in this text there is a separate plugin called Genericon'd. With it you can use the fonts on the websites of WordPress for creating icons, while also using HTML, CSS or short codes.The plugin also displays all of the icons in the administration of WordPress.
We Love Icon Fonts
On this site, the whole collection is kept free and legally font, where you can choose the font to one of the available options. You have the code to add to the CSS-file and code to insert icons into the pages and posts on WordPress based site with one of WooCommerce themes. Very easy to use service that is perfect for viewing and use of fonts to create icons on the sites.
Icon Moon
Icon Moon is a free pack with 450 icons, as well as have the opportunity to buy a premium set at $ 39 for 900 icons. It has this project and a free application where you can create your own font by selecting the icon of the existing sets and drawing up a set of different packages available with icons. This will save you time and download from various sources a lot of different fonts that you would like to try.
Widget Icon Plugin
This free plugin uses icons from the packages and libraries Font Awesome and Elusive, getting access to hundreds of different icons. These icons can also be used as part of the widget for WooCommerce themes, so that from the side panel for each time the relevant symbols and pictograms.
Widget Icon Plugin is very easy to use immediately after installation. You will be available almost immediately paste the selected icon in the post page or a menu with a set of options. You can view the complete list of the icons and select one from the list. You can also specify the location, size and color icons. Icons can be used in all parts of the website with one of WooCommerce themes.
Widget Icon was developed for the framework Twitter Bootstrap, so it is ideal for those with an adaptive design.
We hope that from this post you understand what constitutes fonts icons and how they can be used in various WordPress themes. Following these tips in this post, you can you arrange your own site. The popularity of these icons does not mean that they should be used everywhere; but these icons with the skillful use can decorate your website.
Ask your questions related to the use of WordPress themes and WooCommerce templates, by means of the user forum and the Tech Support of 8Theme.
By using the plugin Font Awesome Menus, you can add icons and menu navigation WordPress, as well as posts and pages. To add icons simply add 'icon-iconname' in the field 'CSS Classes' in the menu.
