FontAwesome 图标在转换过程中扰乱像素

Question

我在树结构列表的应用程序中使用 FontAwesome 图标。 fa-caret-down 和 fa-caret-right 扰乱了我的像素，比如从右边到 dow 它在将 fa-caret-right 更改为 fa-caret-down 期间将内容向右移动 5 个像素。

这是我的 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 图标只不过是简单的字符 - 字母，如果您愿意的话。例如，字母 'W' 比字母 'I' 宽 - 同样 .fa-caret-down 比 .fa-caret-right 宽。

为了克服这个问题，一个解决方案是在您的 i 元素上定义一个特定的 width 以阻止不同的图标本身影响这个值：

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

Answer 2

Font Awesome 已修复此问题。

等宽图标

Use fa-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.

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

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>

FontAwesome 图标在转换过程中扰乱像素

FontAwesome Icons disturbs pixel during transformation

css

fonts

font-awesome