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

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

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

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


当前回答

这似乎是最简单的解决方案:-)

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

其他回答

#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

这似乎是最简单的解决方案:-)

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

或者,如果使用Sass,可以“扩展”FA图标来显示它们:

.mytextwithicon:before {
  @extend .fas, .fa-angle-double-right;

  @extend .mr-2; // using bootstrap to add a small gap
                 // between the icon and the text.
}

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

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

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

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

要使用字体awesome使用css遵循以下步骤-

步骤1 -在CSS中添加FontAwesome字体

/*Font Awesome Fonts*/
@font-face {
    font-family: 'FontAwesome';
    //in url add your folder path of FontAwsome Fonts
    src: url('font-awesome/fontawesome-webfont.ttf') format('truetype');
}

使用下面的css在HTML的class元素上应用字体

.sorting_asc:after {
    content: "\f0de"; /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    padding-left: 10px !important;
    vertical-align: middle;
}

最后,使用“sorting_asc”类在所需的HTML标签/元素上应用css。