What is Icon Fonts? Meet with FontAwesome and IcoMoon
Here I will demonstrate the excellent solutions that can be achieved using Icon Fonts, but let’s first get acquainted with the very concept of font icons, as well as the positive and negative sides of using them. Then we will test the two most popular sets of font icons using various examples, which will allow you to see how they can be used in real projects. What is Icon Fonts? Icon Fonts is nothing more than regular fonts.
The only difference is that instead of the usual for us sets of fonts, consisting of numbers and letters, font icons contain different characters and glyphs. But the main reason why Icon Fonts is so popular on the Web is that they are easily CSS styled. Advantages and disadvantages of font icons. There are several strong positive points in favor of the use of font icons instead of raster images: Any CSS effect can be applied to them. They are scalable because they are created using vector graphics.
This allows you to increase or decrease them without losing quality. Downloading is done through a single, as a last resort, pair of HTTP requests, instead of a large number of them, which may be required to download bitmap images. They load faster due to their small size. Their support is available in all browsers (even such as IE6). So, it turns out that the font icons are perfect for any occasion? Of course not. Despite the fact that they are an excellent means of improving the design, they also have some limitations. So, for example, if instead of a regular icon you want to show a complex image, then Icon Fonts will not help you. In addition, they are often limited to one color, which can only be changed by applying some CSS tricks.
Moreover, font icons are created for certain grid patterns, so their sizes can be 16×16, 32×32, 48×48 pixels, of course, there are other options. And if you change the used grid system to another with a dimension, for example, 25×25, then you can not get the same clear result (however, the situation can be corrected with the help of certain CSS properties). It is also worth mentioning that in addition to font icons, there is another equally popular means of implementing vector icons — these are SVG icons. They allow you to bypass some of the limitations inherent in font icons. For example, you can use more than one color for their design. The rest of the article will be devoted to a basic description of the following two font icon libraries: FontAwesome IcoMoon Four examples of different uses of Icon Fonts will also be presented. Pictograms FontAwesome.
FontAwesome is a rich collection of icons, consisting of 439 copies. This library is absolutely free for both personal and commercial use. It was originally developed for use within the framework of the Bootstrap system, but its use is not limited solely to this framework. Getting started with FontAwesome. The most convenient way to incorporate FontAwesome icons into your project is through a CDN (content delivery network). If you need to work off-line, then you can not do without downloading the full package of icons. It is also necessary to find and include in the site directory a CSS file and a system-generated folder containing fonts of various formats. Next, add a markup code snippet to the HTML that includes our CSS file. In conclusion, you should make sure that the paths used in the URL addresses of the @ font-face and src parameters of the downloaded CSS file are correct, which should coincide with the corresponding directory of your site. In order to find out all possible ways to include this library of icons in your project, refer to the attached instructions that describe the necessary steps to connect it. These icons should be placed inside the span element or i, which should be assigned two classes. The first is the class fa, and the name of the second must match the name of the icon that you want to use, for example, fa-home. The names of all icons available in this library are listed in the attached memo. To customize the appearance of the icons, you can use other predefined classes, which are presented here along with examples of their use. Well, let’s see the FontAwesome package in action, using it in various situations. FontAwesome – example one. First, let’s create a vertical navigation menu. The first thing that needs to be done is to wrap the necessary icons into i elements and increase them to the size corresponding to the size of their container, which is achieved using the predefined class fa-2x. Next, we produce the necessary CSS styling.
FontAwesome is a third example. In this, the third example, we apply the icons to the login form of the account. Perform actions similar to the first two examples. The only difference is that here we use another predefined class fa-fx, thereby fixing the width (equal to about 1.25 em). HTML and CSS code is similar to the above options. Below you can see the result of their work: See the Pen Font Awesome Icon Font Example # 3 by SitePoint (@SitePoint) on CodePen. Please note that in this case we use the same icons as in the example of creating social buttons. Icons IcoMoon. Another popular font icon solution is IcoMoon, which presents two packages. The first can be used freely, and the second Premium, which provides advanced features. More information on these two icon packages can be found here. Depending on the selected option, you will be available a different number of icons and their format.
So, for example, the free version contains 450 copies, and the maximum – 1266. In addition to these packages, IcoMoon provides an online application that allows you to search and download more than 3,500 free icons. This application, in addition, can be used for some simple operations for editing icons, which include their rotation, color change, and more. Here you also have the opportunity to embed your own icons or even create your own sets of font icons. For this there are several free and paid tariffs (with basic and advanced features). The principle of working with IcoMoon. The package you choose to download contains icons of various formats (such as, for example, SVG, AI or PSD). At the same time, this web service allows you to upload icons in SVG format (we will not do this), or in the form of font icons. After downloading the icons, you need to include in your project a CSS file and a folder containing the system-generated fonts of various formats, making sure that the URL addresses contained in the @ font-face and src parameters correspond to their actual addresses in your project. It is also possible to include a quick link directly in your HTML code (we will consider it a link to CDN) and after that you can use the selected icons.
However, this option is always available only in the maximum version, although in the basic version it is also present, though only temporarily, only for one day. Similar to the icons from the FontAwesome library discussed above, each of the IcoMoon icons must also be included in the element. Then you should assign the class a class whose name should match the name of the icon you want to include in your project (for example, icon-home). In addition, you have the ability to edit icon names (i.e., you can set your prefix instead of the default). This is done before loading the icons through the Preferences tab. Let’s turn to an example. An example of using IcoMoon. In this example, we will use the icons to create a section that reflects the workflow of our company. As expected, we will include the icons in the span elements, and then we will make the necessary CSS settings for their styling.