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

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

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

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


当前回答

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

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

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

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

其他回答

似乎给出的答案并没有给出一个真正的背景,因为fontawesome是在你想要的背景区域之外渲染的。 下面是我制作“真实”背景效果的方法:

html:

<div id="bloc" class="bg_ico_outer" style="">
    <i class="fa fa-bookmark-o bg_ico"></i>
    <div class='bloc_inner'>
        <h2>test fontawesome as background</h2>
    </div>
</div>

css:

.bg_ico {
    position: absolute;
    top: 0px;
    right: -10px;
    font-size: 17em;
    color: green;
    transform: rotate(25deg);
}

.bg_ico_outer{position: relative; overflow: hidden;}

#bloc{
    height: 200px;
    width:200px;
    background: blue;
    margin:50px auto;
}
.bloc_inner{
    position: absolute;
}
h2{color: white;}

巩固以上所有内容,下面是工作良好的最终类

   .faArrowIcon {
        position:relative;
    }

    .faArrowIcon:before {
        font-family: FontAwesome;
        top:0;
        left:-5px;
        padding-right:10px;
        content: "\f0a9"; 
    }

您可以尝试这个示例类。在这里找到图标内容: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或以上也有帮助。

要使用字体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。