How can I make sure that each glyph has the same width?

Question

I noticed that even with the same font size, the standard width is missing. How can I use them in front of a list of elements so that words do not seem jagged?

Screenshot:

This is the code:

<ul id="myTab"> <li class="active"><a href="#home"><i class="icon-tasks"></i> Proposal</a></li> <li><a href="#video"><i class="icon-film"></i> Videos</a></li> <li><a href="#asset"><i class="icon-paper-clip"></i> Assets</a></li> <li><a href="#payment"><i class="icon-credit-card"></i> Payment</a></li> <li><a href="#history"><i class="icon-calendar empty"></i> History</a></li> </ul> 

Answer 1

Starting with 3.1.1, you can use the icon-fixed-width class instead of editing CSS.

http://fortawesome.imtqy.com/Font-Awesome/3.2.1/examples/#navigation

Starting with 4.0, you should use fa-fw :
4.x https://fontawesome.com/v4.7.0/examples/#fixed-width
5.x https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons

Thanks @kalessin for pointing out.

Answer 2

Are you sure you don't have another specific style that does this?

Here is what your HTML file looks like in the file on the site that I use for Font Awesome:

Notice how the icons and text are displayed. This is your original image with the lines added:

It looks like you have a style defined somewhere that removes the Font Awesome stylish style.

You can also try adding Awesome to the original font style (starting with font-awesome.css ) to see if this allows it temporarily:

 li [class^="icon-"], .nav li [class^="icon-"], li [class*=" icon-"], .nav li [class*=" icon-"] { display: inline-block; width: 1.25em; text-align: center; } 

Answer 3

Simple and easy to scale glyph or any icon with this css

 > .fa { transform: scale(1.5,1); } 

Answer 4

For Fontawesome versions above 4.X use the fa-fw class in <i> . Link: - https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons