100

我注意到即使字体大小相同，也没有标准宽度。我怎样才能在项目列表前面使用这些，这样单词就不会出现锯齿状？

问题截图：

这是代码： 

<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>
4

4 回答 4

210

从 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 指出。

于 2013-06-02T18:04:05.873 回答
7

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

这就是你的 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;
}
于 2013-05-17T08:57:31.210 回答
3

对于4.X以上的 Fontawesome 版本，请在标签中使用fa-fwclass 。<i>参考：- https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons

于 2019-01-17T06:12:15.060 回答
2

使用此 css 可以简单易用地缩放字形或任何图标

> .fa { transform: scale(1.5,1); }
于 2017-12-21T09:58:45.597 回答