Модернизированный gatsby реагирует на шрифт офигенных иконок от 4 до 5, теперь социальные иконки не работают - PullRequest
Новая
       7

Модернизированный gatsby реагирует на шрифт офигенных иконок от 4 до 5, теперь социальные иконки не работают

0 голосов
/ 23 января 2020

Я обновил классные иконки шрифта gatsby с 4.7 до 5.12. Почти все иконки работают, однако социальные иконки не работают, они просто показывают квадратную рамку.

Я скачал веб-пакет, я пытался установить его с помощью npm, и ничего, что я пробовал, не работает , Все остальные значки работают, кроме социальных.

Ответы [ 2 ]

0 голосов
/ 24 января 2020

Я испортил пару вещей во время обновления. Поскольку я использую шаблон gatsby html5up, я хотел остаться в той же структуре, которая уже была там.

Первая ошибка была в моем _mixins.scss, мне нужно было удалить ссылку font-family: FontAwesome. Первоначально я заменил его, но вам нужно просто удалить его.

Вторая ошибка, это не ссылка на класс. До обновления это было не нужно, но после обновления мне приходилось добавлять класс для каждой иконки. До обновления: className="icon alt fa-linkedin"
className="icon alt fa-envelope"
После обновления:
className="icon alt fab fa-linkedin"
className="icon alt fas fa-envelope"

Причина, по которой некоторые значки отображались, в то время как другие не отображались это потому, что я ссылался на семейство бесплатных иконок в _mixins.scss. При удалении этого все они отображаются в виде квадратов, пока я не добавлю ссылки на классы для каждого отображаемого значка.

0 голосов
/ 24 января 2020

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

Поэтому вам необходимо установить пакет для значки брендов в вашем проекте. 

npm i --save @fortawesome/free-brands-svg-icons

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

import React from 'react';
import { faTwitter } from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

Если вы используете react-fontawesome компонент для установки значков, 

<FontAwesomeIcon
  icon={faLinkedinIn}
  className='icon-class'
/>

Более подробную информацию см. в руководстве по обновлению

...