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:
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.
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
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..
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.
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.