As described in our previous article on icon fonts, icon fonts are vector-based fonts that contain func­tion­al pic­tographs rather than letters. Web de­vel­op­ers who use icon fonts benefit greatly from the freely scalable vectors. Unlike pixel fonts, vector fonts are defined in graphical prim­i­tives like lines, circles, polygons, and curves, in­de­pen­dent­ly of output devices. This enables an easy trans­for­ma­tion without any data loss based on CSS; this way, the relevant icons don’t have to be loaded and adjusted sep­a­rate­ly in a graphics program. Instead, the for­mat­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­vid­ual icons can sub­se­quent­ly be in­te­grat­ed using the HTML attribute ‘class’ on the webpage. Read on to find out how this works using the popular open source font, Font Awesome.

Image: ‘Font Awesome’ home page
‘Font Awesome’ home page (Source: http://fontawe­some.io)

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­stal­la­tion kit. This is available to download from the Font Awesome website. Here are the three steps for in­te­grat­ing your icon fonts:

  1. Download the in­stal­la­tion kit
     
  2. Include 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­stal­la­tion kit. This is done by embedding the following code in the HTML header: <link rel="stylesheet" href="https://www.ionos.com/digitalguide/path/to/font-awesome/css/font-awesome.min.css">The place­hold­er "path/to/" rep­re­sents 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­tographs anywhere in the HTML source code. The following example uses an empty i-element in com­bi­na­tion with the class attribute. The classes are derived from the CSS prefix ‘fa’ and the re­spec­tive icon names: <i></i>

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

As an al­ter­na­tive to the i-element, you can also embed an icon via a se­man­ti­cal­ly empty span-tag.

Image: Detailed view of the fa-home icon
Detailed view of the fa-home icon (Source: http://fontawe­some.io/icon/home/)
Go to Main Menu