在CSS中使用真棒字体图标

Question

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

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

我想用Font Awesome中的图标替换图像。

无论如何，我看不到将CSS中的图标用作背景图片。假设在我的CSS之前加载了Font Awesome样式表/字体，是否可以这样做？

Answer 1

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

确保position:relative在您的实际文本包装器上进行设置，以便定位。

.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;
 }

编辑：

Font Awesome v5使用的字体名称不是旧版本：

• 对于免费版FontAwesome v5，请使用： font-family: "Font Awesome 5 Free"
• 对于FontAwesome v5专业版，请使用： font-family: "Font Awesome 5 Pro"

请注意，您也应该设置相同的 font-weight 属性（似乎是900）。

查找字体名称的另一种方法是右键单击页面上的示例字体超赞图标并获取字体名称（可以找到utf-8图标代码，但请注意，您可以在上找到它:before）。