html - 侧面菜单中的 Font Awesome 图标未对齐

Question

大家好，我的 SideMenu 有问题 我正在使用 Klorofil template和 Font Awesome 对于字体，最大的问题是在我的侧面菜单中，如果我有一个较小的图标，那么文本也会向左推一点，这里两个值得注意的例子是“分类法” "和 "定价"选项，其中文本太靠左了。

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

我创建了一个小的 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 中，“定价”部分显示的文本未对齐。

Answer 1

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

使用 .fa-fw 来设置一个固定的在同一层级的图标。

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

参见 http://fontawesome.io/examples/有关固定宽度图标助手的更多信息。