How to integrate Icon Fonts
As described in our previous article on icon fonts, icon fonts are vector-based fonts that contain functional pictographs rather than letters. Web developers who use icon fonts benefit greatly from the freely scalable vectors. Unlike pixel fonts, vector fonts are defined in graphical primitives like lines, circles, polygons, and curves, independently of output devices. This enables an easy transformation without any data loss based on CSS; this way, the relevant icons don’t have to be loaded and adjusted separately in a graphics program. Instead, the formatting is done code-based by the web browser. For this purpose, the CSS file with icon fonts has to be included in the HTML header. Individual icons can subsequently be integrated using the HTML attribute ‘class’ on the webpage. Read on to find out how this works using the popular open source font, Font Awesome.
Embed icons with Font Awesome
Font Awesome boasts over 600 icons, making it one of the biggest collections of vector-based symbols. The pictographic fonts are available free of charge. To integrate the icon font into the webpage, you just need their installation kit. This is available to download from the Font Awesome website. Here are the three steps for integrating your icon fonts:
- Download the installation kit
- Integrate the stylesheet into the header of the required HTML document: in order to integrate Font Awesome into a webpage, the HTML document must be linked to the CSS file ‘font-awesome.min.css’ from the installation kit. This is done by embedding the following code in the HTML header: <link rel="stylesheet" href="https://www.ionos.co.uk/digitalguide/path/to/font-awesome/css/font-awesome.min.css"> The placeholder "path/to/" represents the web project’s file path on the server.
- Embed icons: when the connection to the CSS file has been established, you can use the icon font pictographs anywhere in the HTML source code. The following example uses an empty i-element in combination with the class attribute. The classes are derived from the CSS prefix ‘fa’ and the respective icon names: <i></i>
The embed code of each icon is documented on the Font Awesome website.
As an alternative to the i-element, you can also embed an icon via a semantically empty span-tag.
Related articles
Icon Fonts
Use icon fonts for integrating vector-based pictograms into your website. In contrast to pixel images, vector graphics have the advantage that they can be scaled up or down without sacrificing quality. With the help of CSS (cascading style sheets) web designers can also integrate other code-based design features. There are many different open source projects available that boast large icon…
Responsive typography - part 1: the basics
The evolution of responsive web design has had a huge effect on typography, and the appearance of text now needs to be adjustable to suit any device. Responsive typography therefore needs flexible, adaptable fonts to ensure maximum readability. Learn more in our overview of font in responsive web design.
Responsive typography: finding the perfect font
Since the introduction of web fonts, designers have enjoyed a massive increase in options for responsive typography. Their scalability means these fonts are displayed perfectly on every device, making these a great solution for responsive design. With thousands of free web fonts available from multiple online platforms, it’s now easier than ever before to find the right font for your website. In…
Responsive web design typography - part 3: technical implementation with CSS
Responsive typography is a much-neglected aspect of responsive web design, but it’s actually surprisingly easy to create a responsive design for both headlines and main text. So what’s the secret? Find out in part three of our series, as we give you a run-down of the implementation of a responsive font and share tips on how to embed CSS commands into your web presence.
How to easily add WordPress icon fonts in your theme
Using WordPress icons will not only brighten up your site, but also make it easier for readers to navigate. Icon Fonts in particular offer many advantages and there are numerous different pictograms available for every purpose. Our article explains what Icon Fonts are, how to add icons to WordPress, and where to find them.
