我有一些CSS看起来像这样:
#content h2 {
background: url(../images/tContent.jpg) no-repeat 0 6px;
}
我想用字体很棒的图标替换图像。
我不认为在CSS中使用图标作为背景图像。这是可能的,假设字体Awesome样式表/字体在我的CSS之前加载?
我有一些CSS看起来像这样:
#content h2 {
background: url(../images/tContent.jpg) no-repeat 0 6px;
}
我想用字体很棒的图标替换图像。
我不认为在CSS中使用图标作为背景图像。这是可能的,假设字体Awesome样式表/字体在我的CSS之前加载?
当前回答
似乎给出的答案并没有给出一个真正的背景,因为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;}
其他回答
#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
为此,你只需要通过:before或:after向所需元素添加content属性和font-family属性。
例如:我想在我的帖子中所有的a元素之后附加一个附件图标。所以,首先我需要搜索这样的图标是否存在于fontawesome。就像我在这里找到的那个箱子,也就是一个回形针。然后我右键单击那里的图标,在pseudo属性之前输入::,以获取它正在使用的内容标记,在我的例子中,我发现它是\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.
}
实际上,即使是字体很棒的CSS也有类似的策略来设置图标样式。如果您想快速获取图标代码,请检查非缩小的font-awesome.css文件,它们是....每个字体都很纯净。
我参加聚会有点晚了。只是想建议另一种方式。
button.calendar::before {
content: '\f073';
font-family: 'Font Awesome 5 Free';
left: -4px;
bottom: 4px;
position: relative;
}
位置,左侧和底部用于对齐图标。
有时添加字体重量:600或以上也有帮助。