在CSS中使用字体真棒图标

本文翻译自：Use Font Awesome Icons in CSS

I have some CSS that looks like this: 我有一些看起来像这样的CSS：

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

I would like to replace the image with an icon from Font Awesome . 我想用Font Awesome中的图标替换图像。

I do not see anyway to use the icon in CSS as a background image. 我不认为无论如何使用CSS中的图标作为背景图像。 Is this possible to do assuming the Font Awesome stylesheets/fonts are loaded before my CSS? 这可以假设在我的CSS之前加载Font Awesome样式表/字体吗？

---

#1楼

参考：https://stackoom.com/question/ZPDq/在CSS中使用字体真棒图标

---

#2楼

You can't use text as a background image, but you can use the :before or :after pseudo classes to place a text character where you want it, without having to add all kinds of messy extra mark-up. 您不能将文本用作背景图像，但您可以使用:before或:after伪类将文本字符放在您想要的位置，而不必添加各种杂乱的额外标记。

Be sure to set position:relative on your actual text wrapper for the positioning to work. 务必在实际的文本包装器上设置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;
 }

EDIT: 编辑：

Font Awesome v5 uses other font names than older versions: Font Awesome v5使用其他字体名称而不是旧版本：

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

Note that you should set the same font-weight property, too (seems to be 900). 请注意，您也应该设置相同的font-weight属性（似乎是900）。

Another way to find the font name is to right click on a sample font awesome icon on your page and get the font name (same way the utf-8 icon code can be found, but note that you can find it out on :before ). 查找字体名称的另一种方法是右键单击页面上的示例字体awesome图标并获取字体名称（可以找到utf-8图标代码的相同方式，但请注意，您可以在:before找到它:before ） 。

---

#3楼

Further to the answer from Diodeus above, you need the font-family: FontAwesome rule (assuming you have the @font-face rule for FontAwesome declared already in your CSS). 除了上面Diodeus的答案之外，还需要font-family: FontAwesome规则（假设您已经在CSS中声明了FontAwesome的@font-face规则）。 Then it is a matter of knowing which CSS content value corresponds to which icon. 然后，知道哪个CSS内容值对应于哪个图标。

I have listed them all here: http://astronautweb.co/snippet/font-awesome/ 我在这里列出了所有内容： http ： //astronautweb.co/snippet/font-awesome/

---

#4楼

No need to embed content into the CSS. 无需将内容嵌入CSS。 You can put the badge content inside the fa element, then adjust the badge css. 您可以将徽章内容放在fa元素中，然后调整徽章css。 http://jsfiddle.net/vmjwayrk/2/ 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>

---

#5楼

You can try this example class. 您可以尝试此示例类。 and find icon content here: http://astronautweb.co/snippet/font-awesome/ 并在此处查找图标内容： 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";
    }

---

#6楼

Consolidating everything above, the following is the final class which works well 合并上面的所有内容，以下是最后一个运作良好的类

   .faArrowIcon {
        position:relative;
    }

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