CODEWITHSUNDEEP
vue.jsquill
anti-destin
anti-destin

Reputation: 869

How to replace default Quill.js dropdown.svg with Font Awesome icon?

Background

We are currently using vue-quill-editor vue-quill-editor to integrate a text editor into a Vue.js app.

As we are using Font Awesome in the app, I have replaced each default toolbar icon with the Font Awesome equivalent.

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>';

The only icon that I have not been able to change in this way is the picker/dropdown icon, as it is not in icons.js.

enter image description here

Question

What is the best way to replace the default picker/dropdown icon with a Font Awesome equivalent ( e.g., <i class="fa fa-chevron-down" aria-hidden="true"></i>)?

Thanks!

Upvotes: 3

Views: 2015

Answers (2)

anti-destin
anti-destin

Reputation: 869

Thanks for the above solution, Patel.

As it happens, I came up with a simpler solution that does not require creating a custom select option.

I just removed the default svg and added the new icon using :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;
  }
}

It seems to work pretty well and will, of course, apply to all such elements.

enter image description here

Upvotes: 2

Pratik Patel
Pratik Patel

Reputation: 6978

You can't change drop-down directly but yah you can add custom select option and apply style on it.

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

Upvotes: 0

Related Questions