如何用 Font Awesome 图标替换默认的 Quill.js dropdown.svg？答案

【问题标题】：How to replace default Quill.js dropdown.svg with Font Awesome icon?如何用 Font Awesome 图标替换默认的 Quill.js dropdown.svg？
【发布时间】：2020-05-29 02:09:09
【问题描述】：

背景

我们目前正在使用 vue-quill-editor vue-quill-editor 将文本编辑器集成到 Vue.js 应用程序中。

当我们在应用程序中使用 Font Awesome 时，我已将每个默认工具栏图标替换为 Font Awesome 等效项。

main.js

import VueQuillEditor from 'vue-quill-editor';
import Quill from 'quill';

import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import '@/assets/scss/main.scss';

const icons = Quill.import('ui/icons');
icons['bold'] = '<i class="fa fa-bold" aria-hidden="true"></i>';
icons['italic'] = '<i class="fa fa-italic" aria-hidden="true"></i>';

我无法以这种方式更改的唯一图标是选择器/下拉图标，因为它不在 icons.js 中。

问题

将默认选择器/下拉图标替换为 Font Awesome 等效项（例如 <i class="fa fa-chevron-down" aria-hidden="true"></i>）的最佳方法是什么？

谢谢！

【问题讨论】：

标签： vue.js quill

【解决方案1】：

感谢上述解决方案，帕特尔。

碰巧，我想出了一个更简单的解决方案，不需要创建自定义选择选项。

我刚刚删除了默认 svg 并使用 :after 添加了新图标：

.ql-picker-label {
  svg {
    width: 0px !important;
  }
}

.ql-header,
.ql-size {
  .ql-picker-label:after {
    color: $black !important;
    content: '\f078';
    font-family: 'FontAwesome';
    position: absolute;
    top: 1px !important;
    right: 0;
  }
}

它似乎工作得很好，当然，它将适用于所有这些元素。

【讨论】：

我把“显示：无；”而不是“宽度”的svg。结果相同

【解决方案2】：

您不能直接更改drop-down，但是您可以添加自定义选择选项并在其上应用style。

Codepen - https://codepen.io/Pratik__007/pen/QWbyWoE

【讨论】：