我有一些CSS看起来像这样:
#content h2 {
background: url(../images/tContent.jpg) no-repeat 0 6px;
}
我想用字体很棒的图标替换图像。
我不认为在CSS中使用图标作为背景图像。这是可能的，假设字体Awesome样式表/字体在我的CSS之前加载?
当前回答
或者，如果使用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.
}
其他回答
您可以尝试这个示例类。在这里找到图标内容: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";
}
实际上，即使是字体很棒的CSS也有类似的策略来设置图标样式。如果您想快速获取图标代码，请检查非缩小的font-awesome.css文件，它们是....每个字体都很纯净。
或者，如果使用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.
}
我参加聚会有点晚了。只是想建议另一种方式。
button.calendar::before {
content: '\f073';
font-family: 'Font Awesome 5 Free';
left: -4px;
bottom: 4px;
position: relative;
}
位置，左侧和底部用于对齐图标。
有时添加字体重量:600或以上也有帮助。
这似乎是最简单的解决方案:-)
#content h2:before {
font-family: FontAwesome;
content: "\f055";
position:absolute;
left:0;
top:0;
}
