React font awesome отображает большую иконку до тех пор, пока не уменьшится
Я использую рендеринг на стороне сервера и рендеринг на стороне клиента (гидрат) с помощью fontawesome, но при рендеринге страницы значок огромен, пока он не масштабируется, а класс правильного размера не добавляется к значку ИЛИ загружается css (я не знаю) .
Ответы 3
Как вы уже догадались, это проблема с загрузкой CSS после первоначального рендеринга страницы. Решение, которое я нашел, состоит в том, чтобы либо убедиться, что CSS на сервере отображается на той же странице, что и значок (в зависимости от того, какие фреймворки вы используете для управления таблицами стилей), либо убедиться, что любой файл .css, который вы используете для это загружается до рендеринга HTML. Это можно сделать, убедившись, что тег ссылки для таблицы стилей отображается в верхней части страницы.
Отключите autoAddCss:
import { library, config } from '@fortawesome/fontawesome-svg-core'
config.autoAddCss = false
Загрузить в CSS прямо в файл SCSS:
@import 'node_modules/@fortawesome/fontawesome-svg-core/styles'
Спасибо. @import '~@fortawesome/fontawesome-svg-core/styles.css'; работал у меня.
Пожалуйста, прочтите эту статью:
https://fontawesome.com/how-to-use/on-the-web/other-topics/server-side-rendering
В ответ вам нужно это в вашем макете или глобальной конфигурации:
import { library, config, dom } from '@fortawesome/fontawesome-svg-core'
config.autoAddCss = false
...
И в своем стиле поставьте это:
<style jsx global>{`
...
@import url('https://fonts.googleapis.com/css?family=Didact+Gothic');
${dom.css()}
...
`}</style>
ты прав. то, что я делал, - это копирование styles.css из
node_modules/@fortawesome/fontawesome/styles.cssв мою общую папку (переименованную в fontawesome.css) и использование в моем html<link rel = "stylesheet" href = "%PUBLIC_URL%/css/fontawesome.css">во второй части, я добавилfontawesome.config.autoAddCss = false;, чтобы не добавлять тот же CSS в голову от клиента рендеринг.