如何确保每个字形具有相同的宽度？

Question

我注意到即使在相同的字体大小,也没有标准宽度.如何在项目列表前面使用这些内容,以使单词不会出现锯齿状？

问题截图:

这是代码:

<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

从3.1.1开始,您可以使用icon-fixed-width该类而不必编辑CSS.

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

从4.0开始,你应该使用fa-fw:
4.x https://fontawesome.com/v4.7.0/examples/#fixed-width
5.x https://fontawesome.com/how-to-use/on-the-web /定型/固定宽度的图标

谢谢@kalessin指出.

Answer 2

你确定你没有定义另一种风格吗？

这就是你的HTML看起来放在我使用Font Awesome的网站上的文件中的方式:

注意图标和文本是如何对齐的.这是添加了线条的原始图像:

看起来你在某个地方定义了一个样式,它正在删除Font Awesome样式.

您还可以尝试添加原始的Font Awesome样式(来自font-awesome.css)以查看是否可以暂时解决它:

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