效果如图,图标变成了正方形框框。经过我的测试,目前解决办法有两种:
1. 引用font-awesome
运行下面的命令安装font awesome
npm install font-awesome --save
然后在main.js里引用font-awesome即可
import 'font-awesome/css/font-awesome.min.css'
效果图:
但缺点是需要引用整个font-awesome(按需引用非常麻烦),这会增加800kb的包体。
2. 使用伪类覆盖选中样式
使用下面的css覆盖选中样式:
<style>
.fr-popup .fr-color-set>span .fr-selected-color::before {
content: '√';
color: #FFF;
font-size: 13px;
font-weight: 400;
line-height: 32px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
text-align: center;
cursor: default;
}
.fr-popup .fr-color-set>span .fr-selected-color {
color: transparent;
}
</style>
效果如下:
虽然丑了一点,但可以节省800kb的传输内容,还是非常值得的。
本文由 程序哩 创作,采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为: Nov 8, 2021 at 08:09 pm