How to integrate Icon Fonts

As described in our previous article on icon fonts, icon fonts are vector-based fonts that contain func­tion­al pic­to­graphs rather than letters. Web de­velopers who use icon fonts benefit greatly from the freely scalable vectors. Unlike pixel fonts, vector fonts are defined in graphical prim­it­ives like lines, circles, polygons, and curves, in­de­pend­ently of output devices. This enables an easy trans­form­a­tion without any data loss based on CSS; this way, the relevant icons don’t have to be loaded and adjusted sep­ar­ately in a graphics program. Instead, the format­ting 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. In­di­vidu­al icons can sub­sequently be in­teg­rated 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 col­lec­tions of vector-based symbols. The pic­to­graph­ic fonts are available free of charge. To integrate the icon font into the webpage, you just need their in­stall­a­tion kit. This is available to download from the Font Awesome website. Here are the three steps for in­teg­rat­ing your icon fonts:

1. Download the in­stall­a­tion kit
2. 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 in­stall­a­tion kit. This is done by embedding the following code in the HTML header: <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> The place­hold­er “path/to/” rep­res­ents the web project’s file path on the server.
3. Embed icons: when the con­nec­tion to the CSS file has been es­tab­lished, you can use the icon font pic­to­graphs anywhere in the HTML source code. The following example uses an empty i-element in com­bin­a­tion with the class attribute. The classes are derived from the CSS prefix ‘fa’ and the re­spect­ive icon names: <i></i>

The embed code of each icon is doc­u­mented on the Font Awesome website.

As an al­tern­at­ive to the i-element, you can also embed an icon via a se­mantic­ally empty span-tag.