在CSS中使用Font Awesome图标 [英] Use Font Awesome Icons in CSS

问题描述

我有一些CSS看起来像这样：

  #content h2 {
 background：url /images/tContent.jpg）no-repeat 0 6px; 
} 
  

我想用 Font Awesome 。

我没有看到使用CSS中的图标背景图象。这是可能做到假设Font Awesome样式表/字体在我的CSS之前加载吗？

解决方案

您不能使用文字作为背景图片，但可以使用：before 或：之后伪类将文本字符放置在所需位置，而不必添加各种杂乱的额外标记。 >

一定要在您的实际文本包装器上设置 position：relative ，以便定位工作。

  .mytextwithicon {
 position：relative; 
} 
 .mytextwithicon：before {
 content：\25AE;   ---这是你的文字。你也可以使用UTF-8字符代码，因为我在这里
 font-family：FontAwesome; 
 left：-5px; 
 position：absolute; 
 top：0; 
} 
  

I have some CSS that looks like this:

#content h2{
   background:url(../images/tContent.jpg) no-repeat 0 6px;
}

I would like to replace the image with an icon from Font Awesome.

I do not see anyway to use the icon in CSS as a background image. Is this possible to do assuming the Font Awesome stylesheets/fonts are loaded before my CSS?

解决方案

You can't use text as a background image, but you can use the :before or :after pseudo classes to place a text character where you want it, without having to add all kinds of messy extra mark-up.

Be sure to set position:relative on your actual text wrapper for the positioning to work.

.mytextwithicon {
    position:relative;
}    
.mytextwithicon:before {
    content: "\25AE"; <--- this is your text. You can also use UTF-8 character codes as I do here
    font-family: FontAwesome;
    left:-5px;
    position:absolute;
    top:0;
 }

这篇关于在CSS中使用Font Awesome图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！