在 CSS 中使用 Font Awesome 图标

Question

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

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

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

无论如何，我不认为使用 CSS 中的图标作为背景图像。假设 Font Awesome 样式表/字体在 CSS 之前加载，是否可以这样做？

Answer 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

）。

Answer 2

实际上，甚至

font-awesome

CSS 也有类似的策略来设置图标样式。如果您想快速掌握

icon

代码，请检查

non-minified font-awesome.css

文件，它们就在那里......每种字体的纯度。

Answer 3

综合以上所有内容，以下是效果良好的最终课程

   .faArrowIcon {
        position:relative;
    }

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

Answer 4

要使用 CSS 使用 font Awesome，请按照以下步骤操作 -

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

步骤 - 2 使用下面的 CSS 在 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;
}

最后，使用“sorting_asc”类将CSS应用到所需的HTML标签/元素上。

Answer 5

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

Answer 6

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

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

position

、

left

和

bottom

用于对齐图标。

有时添加

font-weight: 600

或以上也有帮助。

Answer 7

#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

Answer 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>

Answer 9

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

Answer 10

似乎给定的答案没有给出真正的背景，因为 fontawesome 是在您想要背景的块之外渲染的。 这是我获得“真实”背景效果的解决方案：

html：

<div id="bloc" class="bg_ico_outer" style="">
    <i class="fa fa-bookmark-o bg_ico"></i>
    <div class='bloc_inner'>
        <h2>test fontawesome as background</h2>
    </div>
</div>

CSS：

.bg_ico {
    position: absolute;
    top: 0px;
    right: -10px;
    font-size: 17em;
    color: green;
    transform: rotate(25deg);
}

.bg_ico_outer{position: relative; overflow: hidden;}

#bloc{
    height: 200px;
    width:200px;
    background: blue;
    margin:50px auto;
}
.bloc_inner{
    position: absolute;
}
h2{color: white;}

Answer 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 */
    }

Answer 12

这似乎是最简单的解决方案

:-)

#content h2:before {
   font-family: FontAwesome;
   content: "\f055";
   position:absolute;
   left:0;
   top:0;
}