While browsing the web, you may have noticed similar sets of icons used on all kinds of different sites—think of all those phone, envelope, and map marker icons that seem to be everywhere. If you’ve ever used a website building tool or content management system, you may already be familiar with using these icon sets like Font Awesome or Material Icons. These are examples of icon fonts, and they offer a way for web designers to leverage a browser’s text rendering capabilities to deliver any shape imaginable. With page load speed and cross-device compatibility being more important than ever before in today’s web landscape, icon fonts can be a valuable way to improve a website’s performance and user experience quickly and dramatically.
How does this technology work, and how can you use it to its maximum effect? We’ve put together an overview of how exactly icon fonts work, how to use them on a website and how to create your own with any shapes you can dream of. Exciting stuff!
What Are Icon Fonts?
Let’s start with the basics. All digital fonts work by assigning a letter, number or special character to a string of numbers called a Unicode. For example, in a typical font the letter “A” will be assigned to the Unicode “U+0041.” Every time you type or typeset the letter “A,” that code is used to identify which typographic character should be rendered.
Icon fonts work in the exact same way. Instead of assigning a typical text character to a given Unicode, a font designer can assign any shape they choose. This concept isn’t new, as dingbat or ornament fonts have been around since the beginning digital typography to allow typesetters to easily add glyphs and other symbols to page designs. They’ve gained an increased relevance in recent years, however, due to their versatility and performance in the world of modern web design.
What Advantages Do Icon Fonts Bring to Web Design?
Being fonts instead of raster images, icon fonts offer several advantages over <img /> elements when designing a website. For one, digital font files like .TTF or .OTF have a much smaller file size than the typical .JPG or .PNG image file, and this is especially true for web-optimized font files like .WOFF. This alone can go a long way towards increasing a page’s load speed, which plays a huge role in the user experience in today’s age of mobile device browsing.
On top of this smaller size, having every icon you need in a single font file can lower the number of HTTP requests the browser needs to make to the server when loading a web page. If you have a page with several icons in the form of image files, the browser will need to send separate requests to fetch each image individually, one at a time. Having all those images load in a single request will allow the page to load much faster and with much less demand on the server.
In addition to these speed improvements, icon fonts allow web designers to take advantage of all the CSS properties that can be used to style text. From color changes to text shadows, scaling, transitions and animations, icon fonts a are just as versatile as any other piece of text on a website. Last but not least, they can be rendered at any size without losing quality just like typography.
Can an Icon Font Replace Every Image on Your website?
Despite their exciting potential for CSS styling, fonts can only render flat shapes with a single color. They can’t take the place of photos and other complex images, and even icons with multiple flat colors are better served as PNG files. They also can’t be set as background images through CSS, and workarounds to achieve this effect may be more trouble than they’re worth.
If your site uses a large number of simple, flat shapes, however, then it’s the perfect candidate to take advantage of an icon font’s benefits.
How Are Icon Fonts Used in Web Design?
As mentioned before, many website builder apps and content management systems like WordPress make it easy to add icon fonts to a web project. Many WordPress themes come pre-loaded with icon sets and easy ways to implement them right out of the box, no HTML or CSS needed. Even without these tools, using an icon font is just like using any uploaded font on a web project. There’s a broad range of free icon fonts available for designers to download, and these fonts can be uploaded to a hosting server and implemented with the “@font-face” CSS rule like any other font. From there, the “font-family” property can be used to set any text content in the icon font.
CSS
@font-face {
font-family: myIconFont;
src: url(https://example.com/fonts/myiconfont.woff);
}
.my-icon-font {
font-family: myIconFont;
}
In the above example CSS, the @font-face rule is used to load the icon font by specifying its url in the “src” property. The “font-family” property is used to assign a name to the icon font, and any element with the “my-icon-font” class will be set in the specified font.
The most common way icon fonts are used in web design, however, is through ::before or ::after CSS pseudo-elements. A typical approach is to create an empty <i> tag and use CSS to select that tag’s ::before or ::after pseudo-element, inserting the Unicode for the desired icon using the “content” attribute. Once the content is generated, additional properties are used to specify the icon font as the font-family as shown below.
HTML
<p><i class="font-icon dog"></i> Dog</p>
CSS
.font-icon::before {
font-family: myIconFont:
color: blue;
}
.font-icon.dog::before {
content: " 041"
}
In the above example, the “font-icon” class is used to specify the correct icon set and styling to be used for all icons in the set, while the “dog” class inserts the Unicode for the dog character within the set. Since no actual content exists in the HTML, icons can easily be swapped out and changed using nothing but CSS.
How Can You Create a Custom Icon Font?
While there’s an ever-expanding selection of free icon fonts with even more options available if you’re willing to pay a premium, nothing compares to a set of original icons to make a website stand out and deliver value for a client. If you’re familiar with using software for creating and editing fonts, you probably already guessed that making a font out of icons is exactly the same as making one out of letters and numbers. Just be sure to export your font as a .WOFF or .WOFF2 if possible, since those file types are optimized for serving as web content.
For those of us without font editing tools, there are several web apps available that allow you to upload a set of .SVG files and export them as a font. One such app is IcoMoon, which is free to use as long as you don’t need to save your projects on their servers.
To use IcoMoon and similar apps, create a set of icons in a vector editing tool like Adobe Illustrator or the free Inkscape, and export each icon as an .SVG individually. These can be uploaded to a new icon set in IcoMoon, where they can then be mapped to whatever Unicode you choose and downloaded as a font file. IcoMoon even includes sample HTML and CSS to make implementation into a web project a bit easier.
Conclusion
Whether you plan to create your own icons or to use one of the exciting variety of existing icon sets out there, we hope this overview has inspired you to try this new approach to adding graphics to your next web project. In addition to their versatility and scalability, icon fonts can improve your website’s performance, making them a valuable asset for both usability and search engine optimization. And on top of it all, they’re just a lot of fun to work with!
