在 CSS 中使用 Font Awesome 图标

Posted 2023-02-21

【中文标题】在 CSS 中使用 Font Awesome 图标

【英文标题】：Use Font Awesome Icons in CSS

【发布时间】：2013-01-22 02:08:57

【问题描述】：

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

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

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

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

【问题讨论】：

字体中的字形不能用作背景。然而，SVG 可以

@cimmanon 你介意解释一下它如何适用于 font-awesome

@BonsaiOak 选择的答案尚未解释的内容是什么？如果您有一个未对此回答的问题（或关于 SO 的任何其他问题），请提出一个新问题。

@cimmanon 对不清楚的地方表示抱歉。您似乎暗示可以使用 font-awesome.svg 字体文件中的图标作为背景。但是，您从未明确说过，所以我不确定。

@BonsaiOak 是的，您可以使用 SVG 作为背景图像，就像使用任何其他图像一样。但是，我还没有真正查看过 FontAwesome SVG 来验证它是否可以以这种方式使用。

【参考方案1】：

你不能使用文本作为背景图片，但你可以使用: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)。

【讨论】：

每个图标的文本等效项都在那里fortawesome.github.io/Font-Awesome/cheatsheet

您必须从开头删除 和 ;从最后。字体系列名称是 FontAwesome

@David，这只是文本，使用font-size。

对于 FontAwesome v5 你需要使用.backspace:before font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f55a";

请注意，这似乎不适用于 Input 元素（如提交按钮），因为它们似乎不支持 :before 或 :after。

【参考方案2】：

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

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

【讨论】：

在我删除位置后工作：绝对；在 .element:before 中，现在我可以用很棒的字体图标装饰我的链接，但保留链接的自定义字体

内容价值列表！

正如@staabm 的回答中所指出的，FontAwesome 维护了每个字形代码的官方列表：fontawesome.io/cheatsheet

在 FontAwesome 5 中你必须使用 font-family: "Font Awesome 5 Free"

【参考方案3】：

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

【参考方案4】：

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

   .faArrowIcon 
        position:relative;
    

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

【讨论】：

最佳答案，因为您可以使用图标从所需文本之前删除以前的 标记并替换为该图标。并且给出了相同的空间。

【参考方案5】：

要使用 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');

Step - 2 使用下面的 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”类将css应用于所需的HTML标签/元素。

【参考方案6】：

你可以试试这个示例类。并在此处查找图标内容：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";
    

【参考方案7】：

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

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

position、left和bottom用于对齐图标。

有时添加font-weight: 600 或更高版本也有帮助。

【参考方案8】：

无需在 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>

【讨论】：

“无需在 CSS 中嵌入内容”。嗯，在某些情况下是需要的。

如果您不关心渐进增强，那很好，但您应该尽可能将样式保存在 css 文件中。

【参考方案9】：

#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

【参考方案10】：

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

【参考方案11】：

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

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

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

【参考方案12】：

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

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

【讨论】：

在github.com/Pythonity/icon-font-to-png更新版本