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

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

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

我不认为在CSS中使用图标作为背景图像。这是可能的,假设字体Awesome样式表/字体在我的CSS之前加载?


当前回答

您可以尝试这个示例类。在这里找到图标内容:http://astronautweb.co/snippet/font-awesome/

  #content h2:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    content: "\f007";
    }

其他回答

我参加聚会有点晚了。只是想建议另一种方式。

  button.calendar::before {
    content: '\f073';
    font-family: 'Font Awesome 5 Free';
    left: -4px;
    bottom: 4px;
    position: relative;
  }

位置,左侧和底部用于对齐图标。

有时添加字体重量:600或以上也有帮助。

您可以尝试这个示例类。在这里找到图标内容:http://astronautweb.co/snippet/font-awesome/

  #content h2:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    content: "\f007";
    }

实际上,即使是字体很棒的CSS也有类似的策略来设置图标样式。如果您想快速获取图标代码,请检查非缩小的font-awesome.css文件,它们是....每个字体都很纯净。

#content h2:before {
    content: "\f055";
    font-family: FontAwesome;
    left:0;
    position:absolute;
    top:0;
}

示例链接: https://codepen.io/bungeedesign/pen/XqeLQg

获取图标代码: https://fontawesome.com/cheatsheet?from=io

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

请确保在实际的文本包装器上设置position:相对位置,以便定位工作。

.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, Pro版本,使用:Font -family: "Font Awesome 5 Pro"

注意,您也应该设置相同的font-weight属性(似乎是900)。

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