Web-shed

Solar powered web

Lightning talk notes: Using fonts for super sharp icons!

Hi, these are the notes to go along with the lightning talk that I gave a couple of days ago (21st Nov 2017). If you’ve forgotten the name of a plugin or want to copy and paste some code that I mentioned, sweet – you’ve come to the right place. If you didn’t catch the talk, the post should be thorough enough to read as a stand alone article.

BTW Cardiff WordPress Meetup is pretty cool, if you’re into WordPress and live near to Cardiff then please check us out, join the group, get in touch, or maybe even present a talk (we love to hear from new speakers)!

Different types of graphic – vector vs bitmap

Here is an example showing different types of image on a meetup event page.

The picture of me is a bitmap image (.jpeg), if you zoom in you’ll see that the image pixelates (and conveniently disguises my receding hair line!).

The meetup logo is a is a vector image (.svg), meaning you can zoom in to any level without pixilation.

The Twitter icon in this case it is a bitmap image. It’s pixelated on zooming in, and in fact you don’t need to zoom in much to see a loss in image quality. I could see it was blurry when using my retina laptop (mid 2014 – so it’s not brand-new tech).

Lastly, I’ve zoomed in to some text – this shows how font files (.ttf, .otf etc.) are kind of like a collection vector images.

Put simply, a font file is a collection of vectors, one for every letter, number and symbol.

Font Awesome – an (awesome) icon font

FontAwesome is a font family, similar to Times New Roman or Arial – it can be installed to your system and used in Word, Photoshop etc. and used on the web. Instead of alpha-numerical characters, font awesome is a collection of over 650 icons from brand icons, to navigation and random ones like a lemon or pair of binoculars.

It’s different to standard fonts because it’s an icon font… Awesome!

A handy WordPress plugin for font icons

Better Font Awesome is a WordPress plugin that allows us to use Font Awesome icons within the editor. Install is quick and easy, it takes care of fetching the latest version of the font and gives the end user an easy interface. Icons are added via a drop-down menu into the WYSIWYG editor. On your pages and posts icons are in-lined, and use the same colour as the containing paragraph.

Custom font icons in WordPress

Icomoon is a web service, it gives us font icons, similar to Font Awesome, but it allows us to pick only the icons that we need, and even import custom icons from .svg files.

The free version allows you to generate and download the font files as a zip. From there you can check the demo.html , and see the necessary .css and font files.

Integrate Icomoon free into WordPress

The easiest way to integrate Icomoon, for people without tonnes of developer experience is to add the css with a plugin, here I’m using a plugin called Simple Custom CSS and JS. Open the plugin and click add Custom CSS, copy and paste the contents of the downloaded style.css into the code area, and check external file.

Note: the Premium Icomoon packages are simple to set up, look for the feature ‘Hosting for Production’ on the pricing page this will allow setup with the copy and paste of a single line of code into your theme.

Then copy the downloaded fonts folder into the folder on your server at uploads/custom-css-js

Using Icomoon icons in WordPress

To use the Icomoon font, switch your editor to the Text tab, add a span tag with the class that’s specific to your icon. In this case it’s icon-pacman. We add a comment <!- – icon – -> inside the span tag to stop it from being removed when switching between Text and Visual tabs. The example post on the right is generated from the editor on the left.

Icon generation in your build process

If you’re familiar with editing your own css and sass, and have a build process for themes or plugins, then you can cut out the Icomoon steps and have your own icon font generated while you develop.

Icon generation with npm and gulp

I’ve created an example project on github. It’s a barebones project that uses a couple of specific plugins to generate a font icon family (gulp-iconfont and gulp-iconfont-css). It’s super efficient and time saving, you can drag an svg into the icons folder and it will do all the heavy lifting behind the scenes. For example, copy/move energy.svg to your icons folder, then use span with the class icn-energy to use the icon.

This is perfect when developing custom themes and plugins, as a lot of the time designs don’t exactly match what is available with Font Awesome, and using Icomoon can be time consuming.

WordPress font icon summary

The 3 techniques that I’ve shown have their own merits, from simplicity and ease of use on Font Awesome – to slightly more technical but better control with custom code. Drop me a comment if you have any questions or feedback.