What is Icon Font and how to create Icon Font

You've certainly heard about icons and fonts, so what is Font Icon? Today, we will introduce readers to Icon Font definition, why it became so popular and how to use it to make your website more vivid. Let's get It Started.

1. 8 "recognition" fonts used on applications or websites
2. 2 simple ways to install Google Fonts on Windows 10

What is Font icon?

Icon Fonts are essentially the same as regular fonts - they define the look of a piece of text. However, the big difference between these two fonts is that the Font Icon does not contain letters and numbers, except for icons and icons. You may be confused and wonder what an interesting font that cannot be used to write letters and numbers.

Icont font is mainly used to create style for the website. Because they are based on vector icons, they can be resized, moved, styled and changed using CSS. This provides a great advantage over traditional design methods like images. The interface of a large number of icons can be changed with just a few lines of code. You don't need to edit any image, open Photoshop or upload new files, just write code.

The advantage of Icon Font is to reduce the number of HTTP Requests, help your website load faster and easily change the color and size of the icon.

How to create Font Icons

I will use Font Awesome for these examples, you can also apply them to other font packages.

Start with the following HTML file:

  MUO Icon Fonts 

This is the minimum amount of HTML needed to create a website. However, the most important command line is:

This will load the Font Awesome stylesheet from its CDN. Without this command, your website will not know what Font Awesome is, so this command is very important. This stylesheet will handle all the hard work of embedding web fonts and making things easier.

Font Awesome icons are defined by CSS classes (CSS class) added to the i tag. They are chosen because they have no browser or default styles attached to them, so your icons will not be cluttered. Alternatively, you can add classes to the span tag, however this will upset your HTML.

Here is the basic usage. Put it inside your body card:

  My First Icon 

It looks like this:

There are two classes needed for Font Awesome to work. The first class called fa, stands for Font Awesome. This class is required for all icons, regardless of which icon you use. The second class specifies the specific icon you want to use. This class is also a prefix of fa and because it is a jagged symbol, it is called a fa-cog. You can see a list of all the icons in Font Awesome on their website.

Try changing the icon from cog to anything else.

Find out more

Once you know the basics, it's time for us to learn more.

If you don't want to write your own CSS, you can use the built-in styles in Font Awesome. You can use multiple classes to make larger icons:

You can use another useful class, which is fa-spin. This class will make your icons rotate and when combined with previous classes, you can create some nice effects. Here is the code:

After entering the code, you will get the result as shown:

It's easy to rotate icons - use class fa-rotate:

The number at the end defines the rotation for the icon but cannot be moved. You are limited to 90, 180 or 270 degrees.

The last trick you can do is to stack the icons on each other. The fa-stack class allows you to combine two or more icons together. Here is the code:

After entering the code, you will get the following result:

When you start to combine all classes together, creativity is truly endless.

Customize CSS

Because Icon Fonts are just fonts, you can format them with CSS like any other element. Use CSS3 to create moving icons:

Here is the HTML for the icon above:

This is CSS:

 @keyframes move { from { margin-left: 0; } to { margin-left: 400px; } } .bike { animation-name: move; animation-duration: 4s; } 

This CSS is quite basic but brings great impact.

You can create something special if you want:

This will repeat a bit to reduce the file size on the site. Here is the HTML:

Here is CSS:

 @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .person { opacity: 0; animation-name: fade; } #p1 { color: red; animation-duration: 2s; } #p2 { color: orange; animation-duration: 4s; } #p3 { color: green; animation-duration: 6s; } #p4 { animation-duration: 8s; } 

Like the previous example, this example uses CSS3 effects. An effect with a fade name is created and each icon performs this effect with different time. You can get creative with those icons and CSS3.

That's all I want to recommend today. Now, you can use Font Icons to make your web pages more lively.

What is your favorite Font icon? Did you find this article useful? Let us know by commenting below!