Embedding and Using Icon Fonts With WordPress
Embedding and Using Icon Fonts With WordPress
Images are great and all, but they offer up challenges for websites: they require extra HTTP requests, they add file weight, and they don’t scale well. Icon fonts, on the other hand, need just one HTTP request for any size set of icons, look great on any display or resolution, and you can scale the [email protected]# out of them.
A lot of WordPress themes now use icon fonts, including the default Twenty Thirteen, Twenty Fourteen and Twenty Fifteen themes.
Let’s look at why you should be using them and where to find them.
Why Use Icon Fonts?
Icon fonts use pictograms instead of text and, like text, can by styled at will by applying CSS effects to them. The beauty of this is that they can be tailored to many individual designs while remaining crisp at all display sizes – a powerful combination.
Instead of spending half your week monkeying around with different image sizes and re-uploading files, you can concentrate on making intelligent design decisions within a core set of flexible options.
Icon fonts are usually used for two basic functions: to enhance text, and to stand alone for functional or informational purposes.
Using icon fonts can add an instant additional layer of visual polish to your sites.
Here are just a few of the cool things you’ll be able to do once you have your icon fonts in place:
- Change their color to whatever you want at will
- Easily add and adjust shadows
- Add strokes, gradients, and textures
- Create smooth, eye-catching animations
- Take advantage of transparent knockouts
- Apply standard effects such as adjusting opacity or rotation
- Take advantage of cross-browser support
- Increase site speed and reduce the amount of assets that have to be loaded
All of this is accomplished by a combination of the inherent format of icon fonts and a sprinkling of CSS goodness. Sounds like a good deal, right?
Where to Find Icon Fonts
Perform a simple Google search for “icon fonts” and you’ll likely be bamboozled by the slew of options that pop up. To give you a head start on getting sorted, start your search with our hand-picked mix of free and premium icon font providers:
Take a trip to IcoMoon and you can grab a set of general purpose icons or high-quality line icons for free, or treat yourself to one of their premium options.
There’s also an intuitive app that makes it incredibly easy to generate and download custom icons.
Originally designed for use with Bootstrap, this solid set of over 500 scalable vector icons is free for commercial use and can be styled any which way with CSS.
Font Awesome’s icons are also designed to look stunning on Retina Displays and not trip up screen readers.
Foundation Icon Fonts 2
They’ve been coded to be highly accessible and require just a bit of CSS and the right markup to start using right away.
Fontello is a great little tool that you can use to quickly select a custom pack of vector images you want to download.
Simply drag and drop all of your selected icons onto Fontello. Once they are uploaded, it will appear in the Custom Icons section
With more than 9,000 icons available, Fontastic enables you to create your own icon fonts in just a few seconds. You can eve publish your icons as SVG Sprites.
You can publish with just one click and every change you make instantly syncs with their servers. Too easy.
Pictos is one to consider if you’re prepared to shell out for a set of very nice looking, high quality icon fonts.
Each purchase includes source files in a variety of common formats such as AI, EPS, SVG and Sketch to make further customization a breeze.
Most of the sites above provide their own instructions, tutorials, and FAQ sections to help you get up and running with their icon fonts. The steps required to implement will vary in terms of complexity from provider to provider.
Using the WP SVG Icons Plugin
To keep things simple (and provide you with a fast, easy, code-free option for your site) we’ll be using the free WP SVG Icons plugin to illustrate some of our installation tips below.
This plugin gives you access to over 490 icons that you can easily insert anywhere on your site using shortcodes.
You can even use the plugin’s import function to pull in custom icons from other sources such as IcoMoon.
What You Get With the WP SVG Icons Plugin
After you’ve downloaded and installed WP SVG Icons, a new tab will appear near the bottom of your admin menu labeled WP SVG Icons. When you roll your mouse over it, four more tabs will appear:
- Default Icon Set: This is the main tab where you can choose an icon, select an element you want to wrap it with and copy the shortcode to paste it anywhere on your site. This entire section is built right into the page and post editors, which we’ll look at in the next section.
- Custom Icon Set: If you decide to use IcoMoon for custom icon packs, this is the tab you’ll use to import them for display on your site.
- Settings: The plugin’s designed to be as simple and user-friendly as possible so there aren’t too many settings to play around with. You can choose whether you’d like to load the default icons, select a default icon element, and decide if you’d like to delete all data if uninstalling.
- Upgrade: This leads you to the premium version of the plugin which we’ll discuss closer to the end of this article.
Embedding Icon Fonts into Your Posts and Pages
The WP SVG Icons plugin makes it ridiculously easy for you to insert an icon into your posts or pages. But before you do that, make sure you’ve clicked your cursor in the right area of the editor where you want your icon to show up – in between two paragraphs or beside a subheading, for example.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
If you’re on a post or page edit screen, simply look for the new button just above the visual/text editor that’s labeled Add Icon.
Once you’ve clicked it, a window will open that shows you the same options you find under the Default Icon Set tab. This just makes it easier for inserting icon shortcodes directly into your posts or pages, without having to navigate away from the editor and copy and paste shortcodes every time.
Scroll through the 490+ icons and select the one you want to insert. Using the element buttons at the top, you can choose whether you’d like your icon wrapped with
b tags. Note that the plugin will only allow you to choose one element at a time.
Your shortcode will be generated and inserted into your post or page as soon as you click the blue Insert Icon button. It will show as a shortcode in the editor, but you can see what your icon looks like on your post or page by saving it as a draft and pressing the Preview button.
Embedding Icon Fonts into Your Widgetized Areas
Since the WP SVG Icons plugin generates shortcodes for all icons, you can simply copy and paste them into any area of your site that supports HTML – including your widgets. It’s a great way to style up your sidebars and footers with more than just text.
For example, you can navigate to Appearance > Widgets and drag the Text widget into your sidebar or footer. Using the Default Icon Set tab to generate your icon shortcode, paste it into the content area along with any other HTML you want to include. Hit “save” and the icon will be live on your site.
Importing a Custom Icon Pack from IcoMoon
IcoMoon is one of the best places to look for free icon fonts, and the WP SVG Icon plugin has an import feature that enables users take advantage of it. While the default set of icons that comes with the plugin is great, you may want some of your icons to look a bit different and IcoMoon is perfect for that.
To start, visit the IcoMoon library through its app and browse through the collections of icon fonts available. Some will require a purchase, but the ones that are free will have an +Add button below them. When you’ve found one you like, click +Add.
You’ll then be shown all the icons contained in that collection. Now you’re free to select the ones you want. Click on individual icons if you just want a few, or use your shift key to select lines of multiple icons all at once.
Click Generate Font at the bottom of the screen when you’re happy with your selection. From here, you have the option to customize some settings – naming your font something specific, or changing its class prefix – by clicking on the Preferences button at the top of the screen.
Click the Download button at the bottom of the screen when you’re all done and your fonts will arrive as a ZIP file.
Now you can go back to your WordPress admin area and navigate to WP SVG Icons > Custom Icon Set. Click the Choose file button to select the ZIP file from your Downloads folder and then click the Import button.
If the import is successful, you’ll be able to see all of your new icons listed on the page. Now when you click the Add Icon button to insert icons on any posts or pages, you’ll see a new Custom Pack tab beside the Default Pack tab that you can switch over to for selecting and inserting your custom icons.
Keep in mind that only one custom icon pack can be used at a time. If you’d like to add or remove icons from your custom pack, you’ll have to navigate back to the Custom Icon Set tab and click Uninstall Pack to remove everything. After that, you can return to IcoMoon to select the new icons you want, download the ZIP file, and import them.
If you uninstall a custom icon pack but still see them appearing in WordPress, you may need to clear your web browser’s cache.
Why You’ll Probably Want to Upgrade to Premium
At this point, you may be wondering how to use all the other great customization options with this plugin that were listed at the beginning of the article – like changing the color of your icons, adding shadows, or even applying animation effects.
Unfortunately, these options aren’t available with the free version of the WP SVG Icons plugin. But the upgrade to premium is well worth it.
With the premium version, a new Advanced Attributes button will appear in your icon editor when you click Add Icon on a post or page.
You’ll get to easily adjust the icon size, add a hyperlink to it, and set it to repeat a certain number of times. You can also give it beautiful CSS3 animation effects, set the animation to correspond to a specific event, add class names, adjust its color, and rotate it.
When you navigate to Appearance > Menus, you’ll be able to expand each menu page to find a custom menu icon drop-down menu that’s offered through the premium version of this plugin. It will be set to no icon by default, but you can use the drop-down menu to select the icon of your choice to add a little extra visual appeal to your menu links.
In addition to more customization options and menu icon insertion, the premium version also enables you to use an unlimited number of custom icons, generate icon containers for use on your landing pages, and take advantage of built-in widget support for all icons.
You even get premium support for any problems or advice you may need on how to achieve a very specific customized look.
While the free plugin offers great basic options for fast and easy icon font insertion, the premium version really enables you to take it to the next level. At just $29, it’s quite affordable if you just have one WordPress site, and developer and business licenses are available for use on multiple sites.
Icon fonts are a great way of adding extra visual polish to your sites without slowing down load times, forcing you to create Retina-specific images or having to worry about image scaling issues.
Fortunately, there are also several high-quality sources of free font icon packs available online such as IcoMoon and Font Awesome.
For users who really want to set up icons on their sites as quickly and seamlessly as possible, without having to dabble with code, using the free WP SVG Icons plugin is pretty much a no-brainer. If you want to kick things up a level, the premium version of the plugin is well-worth exploring.
If you want some further reading on using icons, check out Adding Social Media icons to WordPress with CSS Sprites, and if you want to read up on fonts, have a read through How to Find, Choose and Install Beautiful Fonts on Your WordPress Website (With Examples).
We’d love to hear your thoughts on the topic. Do you currently use icon fonts on your WordPress site? Or have any plans to do so? Share your tips or tricks you have in the comments below.