在css :之前使用FontAwesome或Glyphicons
在css :之前使用FontAwesome或Glyphicons
提问于 2012-08-09 08:19:07
在使用:before伪元素时，有没有办法将HTML嵌入到css content:元素中？
我想在下面这样的用例中使用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>回答 7
Stack Overflow用户
回答已采纳
发布于 2012-08-12 12:14:56
您所描述的实际上是FontAwesome已经在做的事情。它们将图标字体系列应用于任何具有以“FontAwesome -”开头的类的元素的图标伪元素。
[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';}Stack Overflow用户
发布于 2016-10-18 20:30:25
@keithwyland的答案很棒。这是一个SCSS混合：
@mixin font-awesome($content){
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
content: $content;
}用法：
@include font-awesome("\f054");Stack Overflow用户
发布于 2012-09-06 05:40:23
在您的列表项的情况下，您可以使用一些CSS来实现所需的效果。
ul.icons li {
position: relative;
padding-left: -20px; // for example
}
ul.icons li i {
position: absolute;
left: 0;
}我已经在OS X上的Safari中测试过了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11875088
复制相关文章
相似问题