在CSS中使用字体真棒图标

「爱情、让人受尽委屈。」 2022-11-28 10:35 190阅读 0赞

本文翻译自：[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中][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中使用字体真棒图标][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]* **我在这里列出了所有内容： [http][http_astronautweb.co_snippet_font-awesome] ： [//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]* **[http://jsfiddle.net/vmjwayrk/2/][http_jsfiddle.net_vmjwayrk_2]**

--------------------

### \#5楼 ###

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

[Use Font Awesome Icons in CSS]: https://oldbug.net/q/ZPDq/Use-Font-Awesome-Icons-in-CSS
[Font Awesome]: http://fortawesome.github.com/Font-Awesome/
[https_stackoom.com_question_ZPDq_CSS]: https://stackoom.com/question/ZPDq/%E5%9C%A8CSS%E4%B8%AD%E4%BD%BF%E7%94%A8%E5%AD%97%E4%BD%93%E7%9C%9F%E6%A3%92%E5%9B%BE%E6%A0%87
[http_astronautweb.co_snippet_font-awesome]: http://astronautweb.co/snippet/font-awesome/
[http_jsfiddle.net_vmjwayrk_2]: http://jsfiddle.net/vmjwayrk/2/