我如何确保每个字形具有相同的宽度?
我注意到,即使在相同的字体大小,没有一个标准的宽度。 我怎样才能使用这些项目列表的前面,这样的话不会出现锯齿?
问题的屏幕截图:
这是代码:
<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>
从3.1.1开始,您可以使用icon-fixed-width
类而不必编辑CSS。
http://fortawesome.github.io/Font-Awesome/3.2.1/examples/#navigation
从4.0开始,你应该使用fa-fw
:
http://fortawesome.github.io/Font-Awesome/examples/#fixed-width
感谢@kalessin指出。
你确定你还没有定义另一种风格吗?
这是如何将您的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; }