Иконки FontAwesome Pro и панировочные сухари Bootstrap 4

Question

Об этом уже много раз спрашивали, но ничего, что я вижу, так как ответ не работает, например, Начальная загрузка модифицирует хлебную крошку с разделителем иконок fontawesome с помощью SASS

Я использую шрифтAwesome 5 Pro (из собственного CDN, kit.fontawesome.com) и Bootstrap 4.0.0

Я хочу изменить стандартный разделитель Bootstrap 4 на значок FontAwesome.

У меня есть следующая разметка:

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Library</li>
    </ol>
</nav>

Если я применю любой из приведенных ответов, он не будет отображаться правильно.Я получаю "квадрат".

Я использую юникод f061, который должен быть "стрелкой вправо", показанной здесь: https://fontawesome.com/icons/arrow-right

Примеры -

.breadcrumb-item + .breadcrumb-item::before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f061";
}

.breadcrumb-item + .breadcrumb-item::before {
    font-family: "Font Awesome 5 Pro";
    content: "\f061";
    font-weight: 900;
}

Правка - отлично работает для отрисовки значков внутри документа, например <i class="fas fa-arrow-right"></i> будет работать.Только когда я пытаюсь сослаться на это в CSS, значок не отображается.При загрузке ресурсов нет 404 ошибок или проблем.

Почему это не работает?

Answer 1

Можете ли вы проверить Rendered Font в вычисленном, чтобы убедиться, что ваш CSS не переопределяется другими

Answer 2

Попробуйте изменить .breadcrumb-item + .breadcrumb-item::before на .breadcrumb-item::before {

Answer 3

Возможно, вам не хватает файла css для сплошного типа.Вот определение в моем проекте.

@import '../node_modules/@fortawesome/fontawesome-pro/scss/fontawesome.scss';
@import '../node_modules/@fortawesome/fontawesome-pro/scss/solid.scss';
@import '../node_modules/@fortawesome/fontawesome-pro/scss/light.scss';
@import '../node_modules/@fortawesome/fontawesome-pro/scss/regular.scss';