使用FontAwesome或Glyphicons与css:之前

Question

content:在使用:before伪元素时,有没有办法在css 元素中嵌入HTML ？

我想在这样的用例中使用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>

Answer 1

你所描述的实际上是FontAwesome正在做的事情.它们将FontAwesome font-family应用于::before任何具有以"icon-"开头的类的元素的伪元素.

[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';}