css - fa-border with fa-fw，边界内错误对齐

Question

我正在尝试使用 fa-fw 和 fa-border 创建一些图标，让它们具有相同的宽度和边框。我曾尝试使用 fa-stack，但这不再是一个选项。

当只使用 fa-border 时，里面的图标被放置在边框的中心，但是使用 fa-fw 会使图标在右边对齐边框，至少在一些图标上，比如这个

<i class="fa fa-quote-left fa-fw fa-3x fa-border"></i>

Simple plunkr演示

如何使用 fa-fw 和 fa-border 使图标位于边框的中央？

Answer 1

如果您查看 css，fa-fw类给出了 <i/>元素固定宽度约为 1.3em。但是 fa-3x类将字体大小设置为 3em。这就是为什么看起来图标被推到了右侧，但实际上容器对于图标来说太小了。

基本上需要的就是自己定制fa-fw-3x类(class)。像这样:

.fa-fw-3x { width: 3.3em; }

摆弄宽度以找出您需要的。