Question

我在树形结构列表中的应用程序中使用FontAwesome图标。 fa-caret-down和fa-caret-right干扰我的像素就像在右边一样，它将内容移动到5像素，在更改fa-caret-right to fa-caret-down。

这是我的HTML代码：

<i class="fa fa-caret-down"></i>

CSS：

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  /*font-size: inherit;*/
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}
.fa-caret-right:before {
  content: "\f0da";
}
.fa-caret-down:before {
  content: "\f0d7";
}

Answer 1

Font Awesome解决了这个问题。

固定宽度图标

使用fa-fw以固定宽度设置图标。当不同的图标宽度甩开对齐时很好用。特别适用于导航列表和列表组。

Here您可以找到有关不同Font Awesome Features的信息。

ul {
    list-style:none;
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
    <li>
        <span class="fa fa-caret-down fa-fw"></span>
        Fruit
        <ul>
            <li>Apple</li>
            <li>Orange</li>
            <li>Apple</li>
        </ul>
    </li>
    <li>
        <span class="fa fa-caret-right fa-fw"></span>
        Animals
        <ul>
            <li>Monkey</li>
            <li>Dog</li>
            <li>Cat</li>
        </ul>
    </li>
</ul>

Answer 2

你必须记住，如果你愿意，Font-Awesome图标只不过是简单的字符 - 字母。这封信＆＃39; W＆＃39;例如，比字母“I＆＃39;更宽。 - 同等.fa-caret-down宽于.fa-caret-right。

要解决此问题，一个解决方案是在width元素上定义一个特定的i，以阻止不同的图标自身影响此值：

i.fa {
    text-align: center;    /* If you want the icons to appear central. */
    width: 20px;           /* Adjust accordingly. */
}

FontAwesome图标在转换期间干扰像素

2 个答案: