使用FontAwesome或Glyphicons with css：before [英] Use FontAwesome or Glyphicons with css :before

问题描述

在使用：before 伪元素之前，是否有任何方法将CSS嵌入css content： ？

我想使用字体真棒（或Glyphicon）在用例是这样的：

  h1：before {
 content：X; 
 padding-right：10px; 
 padding-left：10px; 
 color：@orangeLight; 
} 
  

其中 X 像< I类=图标切>< / I>

我可以，当然是在HTML中手动进行的，但我真的想使用：之前。

，有没有办法使用< i> 作为列表项目符号？这工作，但不正确的行为多行的每一个条目：

 < UL类=图标> 
< li>< i class =icon-ok>< / i>列表< / li> 
< li>< i class =icon-ok>< / i>按钮< / li> 
< li>< i class =icon-ok>< / i>按钮组< / li> 
< li>< i class =icon-ok>< / i>导航< / li> 
< li>< i class =icon-ok>< / i>前置表单输入< / 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; 
} 
  

因此，如果您想再次添加图标， code> :: after 元素来实现这一点。或者对于你的问题的第二部分，你可以使用 :: after 伪元素插入项目符号字符看起来像一个列表项。

  i：after {content：'\2022' ;} 
  

Is there any way to embed HTML in the css content: element when using a :before pseudo-element?

I want to use a Font Awesome (or Glyphicon) in a use case like this:

    h1:before {
        content: "X";
        padding-right: 10px;
        padding-left: 10px;
        color: @orangeLight;
    }

Where X is something like <i class="icon-cut"></i>.

I can, of course do this manually in HTML, but I really want to use :before in this case.

Similarly, is there any way to use <i> as a list bullet? This works, but doesn't behave correctly for multi-line bullet items:

<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>

解决方案

What you are describing is actually what FontAwesome is doing already. They apply the FontAwesome font-family to the ::before pseudo element of any element that has a class that starts with "icon-".

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
}

Then they use the pseudo element ::before to place the icon in the element with the class. I just went to http://fortawesome.github.com/Font-Awesome/ and inspected the code to find this:

.icon-cut:before {
  content: "\f0c4";
}

So if you are looking to add the icon again, you could use the ::after element to achieve this. Or for your second part of your question, you could use the ::after pseudo element to insert the bullet character to look like a list item. Then use absolute positioning to place it to the left, or something similar.

i:after{ content: '\2022';}

这篇关于使用FontAwesome或Glyphicons with css：before的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！