Icon Fonts are quite a familiar term now. Most of the WordPress sites, even the basic ones use icon fonts. Let’s have a look at what are they,why are they used and some of the best icon fonts used these days.
What are Icon Fonts?
Icon Fonts use symbols and pictograms instead of text, but can be styled like text by applying CSS to them.For eg, we can change their color,size etc. They are basically vector icons that have been embedded into a web font for use on web pages to convey web-related actions.
Why it is used?
Icon Fonts basically is a pictographic language to represents something on the website. It is used instead of images as it loads much faster as their file sizes are much smaller. They are also excellent for responsive design as they scale better maintaining their proportions than most of the image types.You can use it for social media logos,shopping cart,smartphone symbols etc.
Use Icon Fonts and you can
- Increase speed of the site
- Change color
- Apply animation effects
- Cross browser support
- Add effects like strokes,gradients, and textures
Popular Icon Fonts
Font Awesome is completely free for commercial use and has a great set of icon fonts which looks gorgeous even on high-resolution displays. It is originally designed for Bootstrap, Font Awesome works great with all frameworks.
- CSS Control
- Perfect on Retina Display
Zurb provides its own handy-dandy icon set, which contains a good collection of general, social, and accessibility icons. You can either download all of them or choose a specific set.
Using the IcoMoon App which is free, you can build your own custom fonts that only contain the icons that you need. Once loaded in your browser, the IcoMoon app works offline also. They have a great set of icons which is free and also upgrade to premium for more options.
How to use icon fonts?
It is very simple.For example, with Font Awesome, you can add them to your page or post using
- shortcode :- [icon name=”book”] or
- <i> tag :- <i class=“fa fa-book”></i> fa-book
- using plugin – you can add icon fonts through the post editor which allows you to select the icon font and the plugin will automatically add the shortcode to the page/post.
How to Add Icon Fonts in WordPress?
It can be added to your site like any other custom fonts. Here are few options on how to add them to your site.
- Fonts like Font Awesome are available from CDN servers across the web and can be linked from your WordPress theme directly.
- Download the icon fonts set and then upload the entire font directory to a folder in your WordPress theme and then use them in your CSS.