324

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

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

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

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

4

12 回答 12

528

您不能使用文本作为背景图像，但您可以使用: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;
 }

编辑：

Font Awesome v5 使用其他字体名称而不是旧版本：

  • 对于 FontAwesome v5，免费版，使用：font-family: "Font Awesome 5 Free"
  • 对于 FontAwesome v5，专业版，使用：font-family: "Font Awesome 5 Pro"

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

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

于 2013-02-06T18:56:59.100 回答
71

除了上面 Diodeus 的回答之外，您还需要font-family: FontAwesome规则（假设您@font-face的 CSS 中已经声明了 FontAwesome 的规则）。然后就是知道哪个 CSS 内容值对应于哪个图标。

我在这里列出了它们：http: //astronautweb.co/snippet/font-awesome/

于 2013-02-07T01:20:11.670 回答
25

实际上，即使是font-awesomeCSS 也有类似的设置图标样式的策略。如果您想快速掌握icon 代码，请检查non-minified font-awesome.css文件，它们就在那里……每种字体都纯正。

Font-Awesome CSS 文件截图

于 2015-11-27T09:45:35.303 回答
22

整合以上所有内容，以下是运行良好的最终类

   .faArrowIcon {
        position:relative;
    }

    .faArrowIcon:before {
        font-family: FontAwesome;
        top:0;
        left:-5px;
        padding-right:10px;
        content: "\f0a9"; 
    }
于 2015-08-31T07:37:55.080 回答
12

To use font awesome using css follow below steps -

step 1 - Add Fonts of FontAwesome in CSS

/*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');
}

Step - 2 Use below css to apply font on class element of HTML

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

And finally, use "sorting_asc" class to apply the css on desired HTML tag/element.

于 2018-08-03T05:30:14.940 回答
8

你可以试试这个示例类。并在这里找到图标内容：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";
    }
于 2015-08-25T10:23:53.413 回答
5

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

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

position,left并bottom用于对齐图标。

有时添加font-weight: 600或以上也有帮助。

于 2020-09-15T09:42:51.173 回答
3

无需将内容嵌入 CSS。您可以将徽章内容放在 fa 元素中，然后调整徽章 css。http://jsfiddle.net/vmjwayrk/2/

<i class="fa fa-envelope fa-5x" style="position:relative;color:grey;">
  <span style="
        background-color: navy;
        border-radius: 50%;
        font-size: .25em;
        display:block;
        position:absolute;
        text-align: center;
        line-height: 2em;
        top: -.5em;
        right: -.5em;
        width: 2em;
        height: 2em;
        border:solid 4px #fff;
        box-shadow:0px 0px 1px #000;
        color: #fff;
    ">17</span>
</i>
于 2015-07-01T19:29:20.887 回答
3 
#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

于 2018-08-14T07:44:01.397 回答
2

或者，如果使用 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.
}
于 2018-06-11T07:59:48.013 回答
0

为此，您只需在适用的情况下通过 :before 或 :after 将content属性和font-family属性添加到所需元素。

例如：我想在帖子中的所有元素之后附加一个附件图标。a所以，首先我需要搜索 fontawesome 中是否存在这样的图标。就像我在这里找到它的情况一样，即fa fa-paperclip。然后我会右键单击那里的图标，然后转到::before伪属性以获取content它正在使用的标签，在我的情况下我发现它是\f0c6. 然后我会像这样在我的css中使用它：

   .post a:after {
     font-family: FontAwesome,
     content: " \f0c6" /* I added a space before \ for better UI */
    }
于 2017-07-06T23:00:54.690 回答
-1

通过命令行使用以下 Python 程序从 Font-Awesome 图标创建 png 图像：

https://github.com/Pythonity/font-awesome-to-png

于 2016-09-27T16:41:52.260 回答