html - 为什么在使用 fontawesome 字体时不在 ul 上排列元素？

Question

我有一个附有字体的列表，但是您会在 jsfiddle 中注意到，代码没有对齐:

https://jsfiddle.net/Lu1dLq92/1/ (现在包括 font-awesome 外部资源)

看起来他们将列表项排列在相对于元素符号本身而不是垂直线上。

ul { list-style:none; }
li { margin-bottom:10px; }
li.calendar:before {    
    font-family: 'FontAwesome';
    content: '\f073';
    margin:0 3% 0 -8%;
    color:#44b3d2;
}

Answer 1

超棒的图标具有不同的宽度。因此，当您将它们设置为出现在您的内容之前时，它们将以不同的宽度偏移该内容的起始位置。

有了 font-awesome，你可以使用它们的固定宽度图标 https://fortawesome.github.io/Font-Awesome/examples/#fixed-width

或者更通用的解决方案是将您的 :before 标记设置为显示为内联 block ，然后为它们提供一致的宽度。

li.calendar:before {    
    font-family: 'FontAwesome';
    content: '\f073';
    margin:0 5px 0 -35px;
    color:#44b3d2;
}

li.map:before {    
    font-family: 'FontAwesome';
    content: '\f041';
    margin:0 5px 0 -35px;
    color:#44b3d2;
}

li.map:before, li.calendar:before{
    display:inline-block;
    width:18px;
}

https://jsfiddle.net/Lu1dLq92/3/