+3 votes
157 views
in Web design by (242k points)
reopened
Icon fonts: web design with vector pictograms

1 Answer

+4 votes
by (1.6m points)
edited
 
Best answer

What are icon fonts?
Where to get icon fonts?
Create your own icon font
How to integrate icon fonts on a website
Customize the icons

image

Icon fonts: web design with vector pictograms

The increasing use of mobile devices for Internet browsing has generated special demands when programming and designing a web page, among them the need to optimize content to reduce loading times and, as a consequence of demand, navigation has to be much simpler and more intuitive. As a consequence, trends are increasingly pointing towards a minimalist design, the so-called flat design. Based on the classic? Less is more ?, this type of design concentrates on the functionality of a web page and minimizes unnecessary decorative load, especially for controls and functional elements of the web (eg use padding in a text editor or use a mixer to control the sound). Thus, instead of using complicated graphics, simple pictograms are used..

These two-dimensional icons are characterized by the fact that they represent the smallest version of an essential function and that they can be incorporated in the form of web fonts in the source code of a web, as well as in user interfaces. With this, the flat design gives back to the esqueumorfismo ( skeuomorfism in English) , a style of detailed representation that aims to mimic physical objects to help users easily interact with digital controls. A classic example of consistent flat design is the Microsoft Windows 8 mobile-friendly user interface:

image
Windows 8.1 Start Screen with Modern UI
image
Scheumorphic interface design example, By Klaus Göttling (Own work) http://creativecommons.org/licenses/by-sa/3.0, via Wikimedia Commons, https://commons.wikimedia.org/wiki/File%3ARedstair_GEARcompressor. png

What are icon fonts?

Icons are a fundamental part of every web page: from the magnifying glass that appears in the search box of a blog or the shopping cart at the top right of an online store to the envelope next to an email address. The main function of icons is to guide users and indicate functions of some elements and to complete processes without using words. It is less and less common for icons to be integrated as bitmaps or CSS sprites. Now, web developers use the well-known icon fonts, that is, fonts that are not composed of letters, but of vector icons. 

Unlike complex graphic representations made up of pixels in a bitmap, vector icons are scalable, do not lose their quality, and their files are smaller than those of bitmap icons. Also, icon fonts can be individually configured via CSS (Cascading Style Sheets). Thanks to its scalable nature, vector icons are displayed perfectly and clearly on large screens and resolution, unlike bitmap graphics in a single color (CSS3 allows gradients). To use icon fonts it is necessary to integrate the entire font, even when only one icon is used. There are numerous providers on the Internet that offer free vector icons, although it is also possible to create custom icon fonts.

Where to get icon fonts?

With the great offer of free vector icons, it is not necessary to invest a lot to use icon fonts on your website. On the Internet there are hundreds of libraries with a wide range of open source solutions that offer an impressive number of vector icons. Here are the most popular providers

  • Font Awesome : It is one of the largest open source icon fonts and has more than 600 highly relevant functional pictograms for web design. It was originally designed for Bootstrap and is now compatible with the most popular frameworks on the market. All icons are available as vector images, are screen reader compatible, and are scalable without losing quality or sharpness. This icon font is subject to the SIL Open Font License and can be used free of charge for commercial purposes.
  • Entypo - Unlike Font Awesome, Entypo does not offer an icon font, but rather a set of vector icons in SVG format. Entypo provides a base for individual fonts that can be combined with those created with font generators for web pages. This icon font is subject to the Creative Commons CC BY-SA 4.0 license and is therefore free to use for commercial purposes.
  • Typicons : This icon font is based on more than 300 screen reader compatible vector pictograms that can be installed thanks to Bower, an open source package management tool. The icons are available as a vector template and reduced CSS. Typicons is also subject to SIL's open typeface license.
  • Open Iconic : This solution offers more than 200 pictograms in SVG, as well as different formats of web fonts and other rasterizable fonts. Its creators particularly emphasize the reduced size of its font files: the Open Iconic icon font in WOFF format weighs only 12.4 KB and is therefore much smaller than Font Awesome. All of its vector icons can be used under the MIT license. All fonts offered are registered under the SIL OFL license and their use for commercial purposes is free of charge.

Create your own icon font

Generally, a web developer does not need to use all the pictograms in an icon font. In many cases, it is possible to combine icons from different web pages, for example, with the help of web font generators such as Fontello, fontastic.me or IcoMoon App. By creating your own icon font, only those icons will be included on the web that are actually visible, which will have a positive impact on reducing loading times and optimizing the browsing speed of a web page..

How to integrate icon fonts on a website

Generally, icon fonts are defined with the help of a CSS class in the HTML source code. For this, it is necessary to include the respective icon font in the header of the HTML document. Some vendors have even prepared a standard CSS file to facilitate this. As long as the font is compatible, it is also possible to integrate it using Bootstrap, the CSS framework. To go deeper into the process of integrating an icon font as a class in CSS in HTML, visit the article with the Font Awesome example.

Customize the icons

Icon fonts offer great configuration possibilities, because they are loaded in their own stylesheet and are retrieved using predefined CSS classes. Unlike pixel-based image files, vector glyph settings can be defined and integrated directly into the CSS code. This allows web developers to customize characteristics such as icon size, color, or opacity depending on the web page layout. In addition, it is also possible to design icons with textures or shadow effects. 


...