Unicode CSS Font Awesome иконки рендеринга в виде коробок в действии - PullRequest
Новая
       17

Unicode CSS Font Awesome иконки рендеринга в виде коробок в действии

0 голосов
/ 16 февраля 2020

Я использую пример jPlayer в приложении create-реагировать. Вот CodeSandbox, показывающий проблему рендеринга шрифта-офигенного значка в виде блоков.

Edit peaceful-heisenberg-d59nz

Значки отображаются с помощью css правил, определяющих содержимое в виде юникода для тегов <i> с классом fa.

Я установил зависимость от font-awesome, которая была в примере jPlayer package.json. Затем я реализовал компонент AudioPlayer и использовал скины, предоставленные jPlayer. Компонент визуализируется, но значки - это все прямоугольники, и я вижу содержимое юникода в источнике.

Вот пример архитектуры проекта. Это кнопка воспроизведения в /src/AudioPlayer/AudioPlayer.jsx.

<Play><i className="fa">{/* Icon set in css */}</i></Play>

Затем AudioPlayer импортируется в App.jsx. App.jsx импортирует таблицу стилей, которая имеет соответствующее правило: 

.fa, .fas, .far {
    font-family: FontAwesome !important;
}

App.jsx затем обрабатывается index.js. Внутри index.js мы импортируем таблицы стилей аудиоплеера: 

// Styles the jPlayer to look nice
import 'react-jplayer/dist/css/skins/sleek.min.css';
// Styles Play/Pause/Mute etc when icons (<i />) are used for them
import 'react-jplayer/dist/css/controls/iconControls.min.css';

Правило для кнопки воспроизведения в iconControls.css выглядит следующим образом: 

.jp-jplayer .jp-icon-controls .jp-play i:before {
  content: "\F04B";
  font-family: 'Font Awesome\ 5 Free';
  font-weight: 900;
}

, затем в пределах index.html ' s head Я включаю удивительный шрифт CDN в качестве последней попытки исправить визуализируемые блоки вместо значков шрифтов.

Ответы [ 2 ]

1 голос
/ 16 февраля 2020

Я думаю, что в стилях. css важен FontAwesome!, Как показано ниже, который переопределяет шрифт FontAwesome 5 Free. Вы можете удалить этот стиль, чтобы увидеть приближающиеся шрифты. 

fa, .fas, .far {
    font-family: FontAwesome !important;
}
0 голосов
/ 16 февраля 2020

Символы шрифта отображаются как открытые квадраты, когда:

  1. Указанный символ Unicode не существует в файле шрифта.
  2. Не удается найти требуемый файл шрифта, и существует запасной вариант не указан.

Поскольку это Font Awesome, нет резервного шрифта И запрошенный символ не существует в большинстве шрифтов. Таким образом, вы получаете двойную проблему.

Это почти всегда происходит, когда браузер не может найти файл шрифта из-за проблем с путями. Я бы просмотрел ваш CSS, чтобы найти, куда запрашивается @font-face, и исправил бы путь, соответствующий вашему проекту. Я предполагаю, что это в файле CSS проигрывателя И что он ожидает, что это локальный файл, а не из CDN.

Также следует помнить, что Webpack иногда перемещает файлы и пути обновлений, найденные в CSS, поэтому вам может потребоваться переместить их в каталог "stati c" и при необходимости изменить пути.

Наконец, вы должны проверить имя шрифта, чтобы убедиться, что он соответствует тому, что у вас есть в вашей системе. Согласно документам Font Awesome, это должно быть font-family: "Font Awesome 5 Free"; у ваших, кажется, есть дополнительный задний лист sh.

...