Custom Icon Fonts
We’ve recently been working on an AngularJS project where we need a wide range of icons in many different situations. We need them for buttons, accordions, dropdowns, inline with text, etc. So we had a large folder full of nicely constructed SVGs, but we needed an easy way to modify their size, color and positioning. We could just as easily add our SVG’s in our markup, but then we run into overcomplicating something that should be simple. We would run into situations where we need to define paths, tags with references for reusability, and so forth. All we need is an icon in our view with varying sizes and colours, so why not handle them the same way that we would handle our fonts with CSS? This is also a great way to have much more control over responsive design for both desktop and mobile UI.
If you’re familiar with the Bootstrap framework, you’ll be familiar with Glyphicons. Glyphicons are essentially a font set of SVG icons that are styled and treated like text. Simply changing their color and font size with CSS gives us the control and ease that we are looking for. We could go through the tedious process of constructing our own font set manually, but there are some fantastic free tools available to us that make creating our own custom font sets quick and painless.
We ended up using https://icomoon.io/ due to its simplicity and easy integration into our Angular JS app.
Begin by creating an account, then click on the IcoMoon App icon in the top navigation bar.
Now click on the Import Icons button and upload your SVGs.
Important notes prior to uploading your SVG’s:
- Strokes and text elements will be ignored by the app. You must convert and/or expand them to fills/
- Unite or combine your fills to avoid overlapping paths/
- Do not use white fills for making holes. Subtract the foreground shape from the background shape. In Illustrator, use the Pathfinder window.
- Adding a bitmap image (PNG, JPEG, etc) to an SVG does not make it a vector, and IcoMoon will ignore these images/
After your icons have been uploaded, click the 'Select' button in the navigation bar and click on each of the icons you wish to add to your new font.
Once all of your icons are selected, click on the ‘Generate Font’ button at the bottom of the window.
Click on the ‘Preferences’ button at the top of the page and change your settings to fit the needs of your app spec.
IcoMoon offeres a paid hosting service for your icons, but in this case you should install this font to our app locally.
Click on the 'Download' button at the bottom of the page and unzip the download. Inside you will see an example app using your new icon font.
For now, we are only interested in the fonts folder and the style.css file. Move the four font files into your project. I like to keep my fonts with my styles, so I generally keep them in app/styles/fonts. Open up the style.css file. Inside you’ll see the basic setup for our icon implementation. Create a new file called font-icons.css in your app/styles folder, and copy the contents of style.css into it.
It’s as simple as that! You’re now ready to implement and style your icons just as you would text. Notice that you have a few classes in font-icons.css.
In my case, I have .icon-down-arrow, and .icon-up-arrow:
To implement my up arrow icon, I can simply create a span element with a class of ‘icon-up-arrow’.
You can also add an extra class to style this particular element if you wish. For example, if you want a red up arrow icon, you can create a red-icon class and add it to your span element.
You can see the ease of customizability and reusability that this provides. Instead of having messy SVG elements all over our markup, you keep your icon implementation simple with font styling and alignment.