The icon fonts they are text fonts. The only difference with letters is that they have icons and shapes. When it comes to treating it, there is no difference with text fonts made up of letters.
Icons are very important when developing a web page. Its function is to guide the user through our page to show him where the information is and complete different processes without the need to use so many words. Before it was necessary for an icon to be accompanied by a bitmap, now it is not.
To this day, most of icon fonts They go alone and fulfill their function in an extraordinary way. This is so because web developers use fonts not composed of letters but of vector programs. These sources are the icon fonts. Unlike normal icons, vector icons do not lose their quality and the files they are composed of are smaller. In addition, icon fonts They can be done individually through the web language CSS (Cascading Style Sheets). Unlike icons, icon fonts they are seen with perfect clarity and high resolution on large screens.
When we want to create a icon Font we need to create it with the full font, even though we need only one icon. Those looking to do this type of work use numerous web providers that offer free vector icons, or even others that do. custom and payment. Remember that what characterizes a professional of an amateur is his exclusivity.
Icon fonts: web design with vector pictograms
One of the reasons that vector icons have been created has been the growing influence of mobile devices. After the excess of information generated by the Internet, the customer has become impatient, unable to wait more than 10 seconds for a web page to load.
The creation of icon fonts has made the loading time of websites shorter. Vector icons are characterized by being the smallest version of the icons, and can be inserted in the source code of a web page, as well as in the user interface that is browsing. In this way, the simple displaces the ornate, and we give rise to the flat design to have a relevant place.
A classic example of flat design is the Microsoft Windows 8 layout:
How to integrate an icon Font in an HTML document
Usually the icons fonts they are integrated into HTML language through CSS, since you can include all of them in CSS and in HTML one by one.
What is SVG?
The acronym SVG names scalable vector graphics. Characteristic also possessed by icon fonts.
They are two-dimensional vector graphics. They can remain static or animated. Its format is XML and its open standard.
Where to get icon fonts?
As we indicated before, there are many providers of vector icons, both paid and free. Because of this, it is not necessary to invest a lot to get icon fonts for our website. These are the providers of icon fonts best known:
Font Awesome . It is one of the sources of icon fonts largest that exist today. It has more than 600 relevant pictograms for web design. It was designed to Bootstrap, but now it can be made compatible with frameworks best known in the world. Their icons fonts they can be viewed as vector images compatible with screen readers without losing their quality and resolution. It can be used free for commercial purposes.
Entypo . Does not offer icon fonts c as such , but vector icons in SVG. It has the basis for individual fonts that we can combine with created fonts. It can also be used freely for commercial purposes only
Typicons. It is based on more than 300 icon fonts compatible with screen readers. It can be installed thanks to Bower, tool used to manage open source packages. The icon fonts they are found as a vector template and a reduced CSS. Free for commercial purposes.
Open Iconic . In number it is the least icons fonts offers. 200 pictograms in SVG. It also offers web fonts. It is characterized by the small size of its font files. For example, Open Iconic weighs only 12.4KB. Used for commercial uses, it has no cost.
When we enlarge the screen of our mobile or computer, the images become pixelated and lose sharpness. With the icon fonts this will not happen. Vector fonts can always be seen correctly, no matter how much we zoom in. Let’s look at some examples.
In addition, by treating it as a font we can change its size, color and shape as we want. When we use an image, it remains inert and without movement.
Benefits of using icon fonts
We reduce the number of calls to the server. Once the file is loaded to the source, we can use all the icons. Before you had to wait for it to load one by one.
We reduce the weight of the web page and therefore the loading time is reduced.
Freedom to use different sizes.
Use of different colors. Color and size are easier to manipulate as they are handled through CSS.
Apply styles to it.
They are easier to integrate.
Loading faster will increase data traffic on our website.
The higher the number of data, the higher the conversion rate.
And this will translate into increased revenue for the company.
If you are a company looking to create a successful corporate website, GMOL Solutions has something to tell you. We have an excellent group of professionals specialized in Digital Marketing and Web Optimization. We can help you make your ecommerce look attractive and take little time to load. Not only through icons but also through images with little weight, good SEO content, etc … We can not only help you, but we will also do it.
