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

Question

背景

我们目前正在使用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>）替换默认选择器/下拉图标的最佳方法是什么？

谢谢！

Answer 1

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

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