How do I make sure every glyph has the same width?

Question

I've noticed that even at the same font size, there is not a standard width. How can I use these in front of a list of items so the words don't appear jagged?

Screenshot of issue:

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>

leesei · Accepted Answer · 2018-07-23T04:25:03.323

213

Since 3.1.1, you could use the icon-fixed-width class instead of having to edit the CSS.

http://fortawesome.github.io/Font-Awesome/3.2.1/examples/#navigation

Since 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.

edited Jul 23 '18 at 04:25

answered Jun 02 '13 at 18:04

leesei

6,020
2
29
51

score 7 · Answer 2 · answered May 17 '13 at 08:57

Are you sure that you haven't got another style defined that is doing this?

This is how your HTML looks placed into a file on a site I have using Font Awesome:

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

It looks like you have a style defined somewhere that is removing the Font Awesome styling.

You could also try adding in the original Font Awesome style (coming from font-awesome.css) to see if that solves 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;
}

Thank you. This was not in my font-awesome.css, nor in the file I downloaded (http://fortawesome.github.io/Font-Awesome/assets/font-awesome.zip) or even in the CDN version that they reference (http://www.bootstrapcdn.com/index.html?v=05162013150137#tab_fontawesome). But it worked. Thanks. — Jim Hohl - CTO Vidaao, May 17 '13 at 18:28

score 3 · Answer 3 · answered Jan 17 '19 at 06:12

3

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

answered Jan 17 '19 at 06:12

Anant Singh

245
3
6

score 2 · Answer 4 · answered Dec 21 '17 at 09:58

2

Its simple and easy to scale glyph or any icon using this css

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

answered Dec 21 '17 at 09:58

Hasnain Mehmood

407
5
4

How do I make sure every glyph has the same width?

4 Answers4

Linked