有什么方法可以在 css 中嵌入 HTML content:
使用 :before
时的元素伪元素?
我想在这样的用例中使用 Font Awesome(或 Glyphicon):
h1:before {
content: "X";
padding-right: 10px;
padding-left: 10px;
color: @orangeLight;
}
在哪里X
类似于 <i class="icon-cut"></i>
.
我当然可以在 HTML 中手动执行此操作,但我真的想使用 :before
在这种情况下。
同理,有没有办法用<i>
作为列表元素符号?这有效,但对于多行元素符号元素表现不正确:
<ul class="icons">
<li><i class="icon-ok"></i> Lists</li>
<li><i class="icon-ok"></i> Buttons</li>
<li><i class="icon-ok"></i> Button groups</li>
<li><i class="icon-ok"></i> Navigation</li>
<li><i class="icon-ok"></i> Prepended form inputs</li>
</ul>
最佳答案
您所描述的实际上是 FontAwesome 已经在做的事情。他们将 FontAwesome 字体系列应用于任何具有以“icon-”开头的类的元素的 ::before
伪元素。
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
}
然后他们使用伪元素 ::before
将图标放置在带有类的元素中。我刚刚去了http://fortawesome.github.com/Font-Awesome/并检查代码以找到这个:
.icon-cut:before {
content: "\f0c4";
}
因此,如果您希望再次添加图标,可以使用 ::after
元素来实现。或者对于问题的第二部分,您可以使用 ::after
伪元素插入元素符号字符,使其看起来像一个列表项。然后使用绝对定位将其放置在左侧,或类似的东西。
i:after{ content: '\2022';}
关于css - 将 FontAwesome 或 Glyphicons 与 css 一起使用 :before,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11875088/