01前端/CSS - 给 Font Awesome 拓展 Base64 编码的图标

和 fa 一样设置到伪元素::before中就行,例如(fa 是直接设置 content,这里用的背景图):

1
2
3
4
5
6
7
8
9
10
11
12
.fa-science-garden::before {
content: "";
display: block;
/*居中*/
margin: 0 auto;
/*自适应大小*/
width: 1em;
height: 1em;
background-size: cover;
/*图片url*/
background-image: url(data:image/png;base64,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);
}

使用起来和 fa 自带的图标一样

<i class="fa fa-2x fa-science-garden"></i>