logo 有点东西

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

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

1. 引用font-awesome

运行下面的命令安装font awesome

1
npm install font-awesome --save

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

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

效果图：

但缺点是需要引用整个font-awesome（按需引用非常麻烦），这会增加800kb的包体。

2. 使用伪类覆盖选中样式

使用下面的css覆盖选中样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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;
}

效果如下：

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

其他推荐内容

Froala 引入全部和按需引入的方法
  • 2021/11/07
    • 编程

Froala 引入全部和按需引入的方法

keep-alive三级以上路由不缓存
  • 2021/10/23
    • 编程

keep-alive三级以上路由不缓存

评论区