在CSS中使用字体图标

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

#内容h2{
背景:url(../images/tContent.jpg)不重复0 6px;
}

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

无论如何,我看不到使用CSS中的图标作为背景图像。假设字体样式表/字体在我的CSS之前加载,这可能吗

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

确保在实际文本包装器上设置position:relative,以便定位工作

.mytextwithicon{
位置:相对位置;
}    
.mytextwithicon:之前{
内容:“\25AE”/*这是您的文本。您也可以像我在这里一样使用UTF-8字符代码*/
字体系列:Fontsome;
左:-5px;
位置:绝对位置;
排名:0;
}

编辑:

Font Aowesome v5使用旧版本以外的其他字体名称:

  • 对于免费版FontAwesome v5,请使用:font系列:“FontAwesome 5免费版”
  • 对于FontAwesome v5,Pro版本,请使用:font系列:“font Awesome 5 Pro”

请注意,您也应该设置相同的字体权重属性(似乎是900)

另一种查找字体名称的方法是右键单击页面上的示例字体图标并获取字体名称(与查找utf-8图标代码的方法相同,但请注意,您可以在:before上找到它)

发表评论