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

font-awesome

Jim Hohl - CTO Vidaao · May 16, 2013 · Viewed 44.6k times · Source

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>

Answer

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.

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

Answer

Related questions