Froala Color选择框不显示选中图标的解决办法

froala

效果如图，图标变成了正方形框框。经过我的测试，目前解决办法有两种：

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