在CSS中使用字体真棒图标

Question

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

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

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

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

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

除了上面的Diodeus的回答,你需要font-family: FontAwesome规则(假设你@font-face已经在CSS中声明了FontAwesome 的规则).然后,知道哪个CSS内容值对应于哪个图标.

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

Answer 3

实际上即使font-awesomeCSS也有类似的策略来设置他们的图标样式.如果你想快速掌握icon 代码,请检查non-minified font-awesome.css文件,它们是...... 每种字体的纯度.

Answer 4

合并上面的所有内容,以下是最后一个运作良好的类

   .faArrowIcon {
        position:relative;
    }

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

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

步骤 - 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 ”类在所需的 HTML 标签/元素上应用 css。

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

您可以尝试此示例类.并在此处查找图标内容: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";
    }