Иконки FontAwesome Pro и хлебные крошки Bootstrap 4

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

Я использую Font 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 или проблем с загрузкой ресурсов нет.

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