У меня есть WordPress-сайт, в настоящее время использующий FontAwesome Pro. Я пытаюсь преобразовать сайт, чтобы использовать иконки SVG, чтобы уменьшить размер загрузки. Я не могу преобразовать значки меню под углом, которые вставляются Bootstrap.
Я использую веб-пакет для минимизации FontAwesome в файл .js, включающий весь CSS. JS заменяет все теги соответствующими тегами.
Я не могу заставить это работать с навигационным меню bootstrap4. Bootstrap применяет следующий CSS-класс к выпадающему меню:
Меню HTML:
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-5613" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-5613 nav-item">
<a title="Menu 1" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-5613">Menu 1</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-5613" role="menu">
<li>...</li>
</ul>
</li>
CSS:
.dropdown-toggle:after {
content: "\f107";
font-family: 'FontAwesome' !important;
font-size: 0.6rem;
margin-left: 0.35rem;
font-weight: 900;
vertical-align: middle;
border: none;
}
Поскольку он не отображает тег в DOM, JS не заменяет его SVG. Я не уверен, как обойти это.
Я пытался изменить выпадающий переключатель: после класса, как таковой, но не могу заставить его работать:
background-image: url(data:image/svg+xml,%3Csvg class='svg-inline--fa fa-angle-down fa-w-10' aria….4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z'%3E%3C/path%3E%3C/svg%3E);