Обновление шрифта: потрясающие иконки в проекте gatsby реакции, новые иконки не работают - PullRequest
Новая
       83

Обновление шрифта: потрясающие иконки в проекте gatsby реакции, новые иконки не работают

4 голосов
/ 20 января 2020

Я работаю над реактивным проектом, используя шаблон gatsby html5up. Я обновляю шрифт с 4,7 до 5,12. Работали иконки 4.7, поэтому я основываю свои новые местоположения файлов на старых.

Я загрузил файл all. css и папку webfonts. Вместо того, чтобы просто удалить все, я добавил их в новые и существующие папки.

В моем main.s css: 

//@import '../css/font-awesome.min.css';
@import '../css/all.css';

Затем в моем src / assets / * Папка 1020 *, я добавил свой файл all. css, там же, где находится файл 4.7 font-awesome.min. css.

Затем я скачал и добавил папку webfonts в src / assets .

Мой проект собирается без ошибок, но значки не отображаются. Что я делаю не так?

enter image description here

1 Ответ

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

Я понял это и разместил здесь на тот случай, если у кого-то есть такая же проблема.
Зависимости для этого проекта: 

    "gatsby": "^2.15.14",
    "gatsby-plugin-manifest": "^2.2.16",
    "gatsby-plugin-offline": "^3.0.6",
    "gatsby-plugin-react-helmet": "^3.1.7",
    "gatsby-plugin-sass": "^2.1.14",
    "node-sass": "^4.12.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-helmet": "^5.2.1"

Шаблон, который я использую: gatsby-starter-forty-v2

Необходимые шаги:

С сайта fontawesome, скачайте файл all.css и поместите в папку /src/assets/css. Загрузите папку webfonts и поместите ее в папку /src/assets (all.css ссылается на папку webfonts по имени, должна содержать имя и структуру)

В /src/assets/scss/main.scss Заменить старый импорт:
//@import '../css/font-awesome.min.css';
@import '../css/all.css';

В /src/assets/scss/libs/_mixins.scss Закомментируйте семейство шрифтов для @mixin icon: //font-family: FontAwesome;

В /src/assets/css/all.css Редактирование веса шрифта с 400 900 для .far и @font-face: font-weight: 900; }

Наконец, очистите предыдущую версию 4.7, хотя она работала без этого:

Удалить /src/assets/fonts папку

Удалить /src/assets/css/font-awesome.min.css

Для значков бренда мне пришлось добавить класс fab к отображаемому значку <a href="#" className="icon alt fab fa-linkedin">
Для бесплатных значков мне пришлось добавить класс fas к значку отображаемый значок <span className="icon alt fas fa-phone"></span>

...