在CSS中使用字体图标

Question

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

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

我想用字体Awesome的图标替换图像。

我没有看到无论如何使用图标在CSS作为背景图像。假设字体很棒的样式表/字体在我的CSS之前加载，这是可能的吗？

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

编辑：

字体Awesome v5使用了与旧版本不同的字体名称：

• 对于FontAwesome v5，免费版本，请使用:font-family：“Font Awesome 5 Free”
• 对于FontAwesome v5 Pro版本，请使用:font-family：“Font Awesome 5 Pro”

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

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