我想使用字体Awesome图标作为CSS内容，即，
a:before {
content: "<i class='fa...'>...</i>";
}
我知道我不能在内容中使用HTML代码，所以它只剩下图像吗?
当前回答
你应该将Font -weight设置为900来使Font Awesome 5 Free Font -family正常工作。
这是工作中的一个:
.css-selector::before {
font-family: 'Font Awesome 5 Free';
content: "\f101";
font-weight: 900;
}
其他回答
a:before {
content: "\f055";
font-family: FontAwesome;
left:0;
position:absolute;
top:0;
}
示例链接: https://codepen.io/bungeedesign/pen/XqeLQg
获取图标代码: https://fontawesome.com/cheatsheet?from=io
你可以在CSS中使用unicode。如果你使用字体awesome 5，这是语法;
.login::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f007";
}
你可以在这里看到他们的文档。
正如FontAwesome网站上所说的，FontAwesome =>
HTML:
<span class="icon login"></span> Login</li>
CSS:
.icon::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.login::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f007";
}
在。login::before ->中编辑内容:";以适应您的unicode。
你应该将Font -weight设置为900来使Font Awesome 5 Free Font -family正常工作。
这是工作中的一个:
.css-selector::before {
font-family: 'Font Awesome 5 Free';
content: "\f101";
font-weight: 900;
}
如果你可以通过font-awesome访问SCSS文件，你可以使用这个简单的解决方案:
.a:after {
// Import mixin from font-awesome/scss/mixins.scss
@include fa-icon();
// Use icon variable from font-awesome/scss/variables.scss
content: $fa-var-exclamation-triangle;
}
