我非常强烈地希望避免在我的标记中乱扔非语义<i>
标签,并尝试icon-*
在其他元素上使用 CSS 类,例如有标题,主要用例。
我有以下标记:
<div class="box-header">
<h2><i class="icon-list-ul"></i><span class="break"></span>Unordered List</h2>
</div>
<div class="box-header">
<h2 class="icon-list-ul">Unordered List</h2>
</div>
第一个是原始标记,第二个是我想要的标记。渲染后,它们看起来像:
稍后我会担心分频器。但是,请注意文本“粗体”的差异。我注意到 Font Awesome 默认情况下将其字体(和一些其他属性)应用于任何具有 CSS 类匹配的东西icon-*
,我第一次尝试纠正这个问题是围绕着改变这个 css:
[class^="icon-"],
[class*=" icon-"] {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
}
进入以下以确保字体选择仅适用于:before
图标内容:
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
}
现在我有一个不同的问题,如以下屏幕截图所示:
虽然字体粗细恢复到正常(细)值,但对于标准标记和我想要的标记情况,文本的对齐方式已经大幅下降。这里发生了什么,我怎样才能icon-*
在任意元素上使用这些类,而不会让这些元素自己的格式变得不合时宜?
感谢您提供的任何帮助!