How do I make sure every glyph has the same width?
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>
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.
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;
}
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
Its simple and easy to scale glyph or any icon using this css
> .fa { transform: scale(1.5,1); }