侧面菜单中的字体真棒图标未对齐

Question

大家好我的SideMenu有问题 我使用Klorofil template和 Font Awesome 来表示字体问题，在我的侧边菜单中，如果我的图标比较小，那么文字也是向左推了一下，这里有两个值得注意的例子是＆＃34; Taxonomy＆＃34;和＆＃34; Pricings＆＃34;文本在左边太多的选项。

你们如何制作这样的菜单以确保它们居中？

我已经创建了一个小jsFiddle https://jsfiddle.net/2m0uec86/1/，其中有一个非常侧边栏的模拟，任何帮助都会受到赞赏，同样重要的是要做到这一点，以便文本始终对齐，无论我使用的图标的大小。

<div id="clubPages" class="collapse">
                        <ul class="nav">
                            <li><a href="#"><i class="fa fa-bullseye" aria-hidden="true"></i> <span>All Clubs</span></a></li>
                            <li>
                                <a href="#" data-toggle="collapse" data-target="#paymentPages" class="collapsed"><i class="fa fa-money" aria-hidden="true"></i> <span>Payment</span> <i class="icon-submenu glyphicon glyphicon-chevron-left"></i></a>
                                <div id="paymentPages" class="collapse third-collapse">
                                    <ul class="nav">
                                        <li><a href="#"><i class="fa fa-credit-card" aria-hidden="true"></i> <span>Methods</span></a></li>
                                        <li><a href="#"><i class="fa fa-eur" aria-hidden="true"></i> Pricings</a></li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>

在上面的HTML中，例如＆＃34; Pricings＆＃34;部分显示文本未对齐。

Answer 1

.fa-fw用于对齐宽度不同的图标。

在相同级别的图标上使用.fa-fw 设置固定。

注意：子级图标不会与父图标对齐。只有相同级别的图标。

有关固定宽度图标助手的详细信息，请参阅http://fontawesome.io/examples/。

Answer 2

在CSS中添加此规则：

#clubPages ul li i{min-width:30px;}

基本上，无论图标宽度如何，您都会告诉文本在图标的某个间隙后开始渲染。确保最小宽度大于图标的宽度。

Answer 3

要进行调试，您可以添加以下内容，并且您可以轻松地看到文本不是太短导致问题，FA图标不是wrapped，因此它不是集中的，宽度是变化。

https://jsfiddle.net/dalinhuang/rnL7jgta/（在这里你可以很容易地看到你遇到问题的原因。请查看下面的解决方案）

/* test border block */
* {
    border: 1px solid red;
}

快速解决方法是将此图标包装器添加到css：

.icon {
  text-align: center;
    display: inline-block;
    width: 30px;
}

围绕第48行更新

<div class="icon">
    <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</div> <span>Taxonomy</span>

结果：

https://jsfiddle.net/dalinhuang/rracqL2e/2/