在CSS中使用漂亮的图标

你不能使用文本作为背景图像，但是你可以使用: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, Pro版本，使用:font-family: "Font Awesome 5 Pro"

注意，你也应该设置相同的粗细属性(似乎是900)。

找到字体名称的另一种方法是右键单击页面上的示例字体awesome图标并获得字体名称(与找到utf-8图标代码的方法相同，但请注意，您可以在:before上找到它)。

除了上面Diodeus的答案，你需要font-family: FontAwesome规则(假设你已经在你的CSS中声明了FontAwesome的@font-face规则)。接下来就是要知道哪个CSS内容值对应哪个图标。

我把它们都列在这里:http://astronautweb.co/snippet/font-awesome/

不需要在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>

您可以尝试这个示例类。并在这里找到图标内容: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";
}

巩固以上所有内容，下面是工作良好的最终类

   .faArrowIcon {
position:relative;
}


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

实际上，甚至font-awesome CSS也有类似的策略来设置图标样式。如果你想快速掌握icon 代码，检查non-minified font-awesome.css文件，它们是....每个字体都很纯净。

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

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

为此，你只需要将content属性和font-family属性通过:before或:after添加到所需元素。

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

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

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

要使用字体awesome使用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');
}

使用下面的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"类在所需的HTML标签/元素上应用css。

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

获取图标代码 https://fontawesome.com/cheatsheet?from=io < / p >

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

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

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

有时添加font-weight: 600或以上也有帮助。

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;}

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

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