在CSS中使用真棒字体图标

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

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

或者，如果使用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.
}

无需将内容嵌入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>

#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 将content属性和font-family属性添加到所需元素。

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

   .post a:after {
     font-family: FontAwesome,
     content: " \f0c6" /* I added a space before \ for better UI */
    }

综合以上内容，以下是最后一课，效果很好

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

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

我在这里列出了所有内容：http : //astronautweb.co/snippet/font-awesome/

实际上，甚至font-awesomeCSS也具有类似的策略来设置其图标样式。如果您想快速掌握icon 代码，请检查non-minified font-awesome.css文件，这里的每种字体都纯净。

您不能将文本用作背景图像，但是可以使用: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）。