Как заменить иконку SVG иконкой на основе шрифта (Font Awesome / Ion)?

Question

У меня есть выпадающий список, в котором отображается значок SVG, в то время как все остальные показывают кнопку со значком на основе шрифта (в данном случае ion-icon).Конечно, я хочу, чтобы все выпадающие списки выглядели одинаково.

Я пытался изменить код CSS и просматривал некоторые файлы .js и .php, но ничего не получилось.

КодSVG icon

<svg class="dd__expandIcon" viewBox="0 0 9 15" width="9px" height="15px">
    <path d="M315,1318.04l-4.5,4.96-4.5-4.96,0.944-1.04,3.557,3.92,3.553-3.92,0.944,1.04m-9-5.08,4.5-4.96,4.5,4.96-0.944,1.04-3.557-3.92-3.553,3.92L306,1312.96" transform="translate(-306 -1308)"></path>
</svg>

.dd__expandIcon {
    width: 9px;
    height: 15px;
    flex-shrink: 0;
    fill: #bdbdbd;
    margin-left: 10px
}

Код иона-иконки

<button type="button" class="reactiveToggleBtn___cQAWH">
    <i class="ion-chevron-down"></i>
</button>

.reactiveToggleBtn___cQAWH i {
    font-size: 13px;
    color: #484848;
}

Вы можете непосредственно увидеть фактический результат (выпадающий список "Thème de la séance") против ожидаемогоРезультат (все остальные выпадающие списки) здесь: site

Спасибо за помощь!

Answer 1

Я наконец смог найти способ сделать трюк.

Скрыть svg:

svg.dd__expandIcon {visibility:hidden;}

Добавить фоновое изображение в поле выбора

.dd__selectControl {background: #f1f1f1 url('/wp-content/uploads/dropdown2.png') right no-repeat!important;}

Может быть, это не правильный способ сделать это, но, как уже было сказано, это делает трюк.

Answer 2

Вы можете конвертировать файл иконки SVG в базовый значок шрифта, используя

https://icomoon.io/app

1. Импорт иконок
2. Выберите значки, которые вы хотите конвертировать
3. Нажмите на шрифт

Для получения дополнительной информации проверьте ссылку ниже: Как преобразовать файлы .svg в шрифт?