Froala Color选择框不显示选中图标的解决办法
in 前端 with 0 comment

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

in 前端 with 0 comment

无标题-16363706029451.png

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

1. 引用font-awesome

运行下面的命令安装font awesome

npm install font-awesome --save

然后在main.js里引用font-awesome即可

import 'font-awesome/css/font-awesome.min.css'

效果图:

image-20211108192824754-16363709064272.png

但缺点是需要引用整个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>

效果如下:

image-20211108193100488-16363710615953.png

虽然丑了一点,但可以节省800kb的传输内容,还是非常值得的。

Comments are closed.