Zagirova Design
English
The best Icon Fonts of 2018

The best Icon Fonts of 2018 - Zaggi Fonts

It’s easier for a person to locate the icon of the famous "I like" to review in the entire page where it says that phrase and click. This is because the brain processes information faster if it is presented in the form of an image in the form of text, because of this it tends to remember better the visual content since it connects more with memories and emotions.

The fonts icon is a symbology that represents words or actions in the form of icons, presented as a typography that can be installed on the computer and can be used on web pages using the css language.

At the website level it is more effective to use icon fonts because the images can lose quality and slow down the loading times of a web page. If you have a web page you need to load it fast, that facilitates indexing by Googlebots and improves the user experience by not having to wait for those long screen loads.

In our process of creating web pages in Zagirova Design we use pages such as font awesome to locate a font that suits the design we want to make, however we have a market need to not get a variety when wanting to transmit a message more specific.

That is why we gave ourselves the task of creating our own source of icons font and thus contribute to the market and facilitate the work of the developers of pages and blogs. With more than 100 options to choose from, we offer you a solution to transmit messages quickly and present your content with our Zaggi Fonts.

We offer a format that allows modification of style and that is also completely free.

SEE ZAGIFONT

How to use icon fonts?

There are different methods, in this article we will explain different ways and can use the one that best suits your needs.

Adjust icon fonts in HTML

The first option is simple. Below is a stretch to wrap a character (in this case, the letter 's') and we add a class to the stretch. The character has been assigned to a specific icon in the chosen font.

<a href="http://amazon.com"> <span class="zagi-regalo"> <span>Comprar regalo</span> </a>

To display the icon CSS is used for the .icon style so it uses the icon of the chosen font.

.icon {
font-family: 'zagifont';
}

Use CSS generated content

Instead of including the character directly in our html, we use some content generated by css. You must remove the stretch and the character and move the icon class to the link. We also add another 'car' class to the link.

<a href="http://amazon.com" class="zagi-regalo"> Comprar regalo </a>

The magic happens in CSS. First we assign the icon font to the icon class. Next, we use the element: before pseudo element in the cart class to serve the character. : It also works when you want the icon on the right.

.zagi-regalo {
   font-family: 'zagifont';
}
.zagi-regalo:before {
   content: "\3d";
}

Data icon attribute

A similar method to the previous one, the html5 data attribute is used. Here we will create a data icon attribute.

<a href="http://amazon.com" class="zagi-regalo" data-icon="s"> Comprar regalo </a>

As before, we will add the chosen font to the icon class, but now we will create the character by referring to what is in the data icon.

.icon {
   font-family: 'zagifont';
}
.zagi-regalo:before {
  content: "\3d";
}

The icon fonts have many advantages, among them are that you can modify the size and color without changing the quality of the image, improve the loading screen speed, look great and the best part is that you can download it for free.

We invite you to download and optimize your webs with our Zaggi Font and share your images with us on the networks.

DOWNLOAD

Blog Font