Ответа на этот вопрос

Я пытаюсь использовать response-fontawesome и реализовать его в том, что кажется мне точно таким же, как readme: https://github.com/danawoodman/react-fontawesome/blob/master/readme.md

import React from 'react';
import FontAwesome from 'react-fontawesome'
...
export default class ComponentName extends React.Component {
    render() {
        return (
            <div>
                <div>
                    <span>
                        <FontAwesome
                            className='super-crazy-colors'
                            name='rocket'
                            size='2x'
                            spin
                            style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
                        />
                        SOME TEXT
                    </span>
                </div>
                ...
            </div>
        )
    }
}

Но я не вижу иконку в DOM. Хотя я вижу в Chrome Dev Tools:

<span style="text-shadow:0 1px 0 rgba(0, 0, 0, 0.1);" aria-hidden="true" class="fa fa-rocket fa-2x fa-spin super-crazy-colors" data-reactid=".0.$/=11.0.0.$/=10.$/=10.$/=10"></span>

который, как мне кажется, должен быть тегом <i>. Я попытался изменить <span>...</span> на <i>...</i> в "edit as HTML" в инструментах dev, и значок все еще не отображался.

У меня есть add-module-exports в моих плагинах и stage-2 в моих настройках в моем webpack.config.

Может ли кто-нибудь сказать мне, если я что-то упустил? Нужен ли мне какой-то другой пакет, отличный от реакции-fontawesome, чтобы сделать эту работу? Нужно ли мне импортировать стандартный шрифт-awesome.css или загрузить шрифт-удивительный CDN? Любая помощь будет принята с благодарностью, спасибо!

Ответы

Ответ 1

У меня была та же проблема. Прочтите их Readme.md, и вы увидите, что есть эта заметка:

Примечание. Этот компонент не включает ни один из шрифтов Font Awesome CSS или шрифтов, поэтому вам нужно обязательно включить их в свой конец, добавив их в свой процесс сборки или связавшись с версии CDN.

Таким образом, самый простой способ - связать с fontovesome cdn в html.

<head>
<meta charset="UTF-8">    
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" 
crossorigin="anonymous">
</head>

Ответ 2

Как упоминают другие ответы, вам нужно как-то добавить значки на свою страницу. Посмотрите здесь пример react-fontawesome: https://github.com/danawoodman/react-fontawesome/blob/master/examples/index.html

Вы можете видеть, что разработчик включил шрифт-awesome CSS на строку # 5.

В отдельном примечании был выпущен Font Awesome v5, и вам стоит подумать о переходе на него. Прочтите соответствующие документы здесь: https://www.npmjs.com/package/@fortawesome/react-fontawesome

Чтобы использовать v5:

Установите зависимости:

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome
$ npm i --save @fortawesome/fontawesome-free-solid

Затем ваш компонент может использовать такие значки:

import ReactDOM from 'react-dom';
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/fontawesome-free-solid'

const element = (
  <FontAwesomeIcon icon={faCoffee} />
)

ReactDOM.render(element, document.body);

Вы также можете создать библиотеку широко используемых значков в своем приложении, для удобства использования. Проверьте рабочий код здесь: https://codesandbox.io/s/8y251kv448

Более подробную информацию о библиотечной функции можно найти здесь: https://www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently

Ответ 3

Выполнить npm install font-awesome --save

В ваших index.js или App.js или YourComponent.js импортируйте миниатюрный файл CSS.

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

Ответ 4

Как заметил @Alee, шрифты Fontaweome не включены в пакет. Вам придется импортировать его самостоятельно.

  • Установите пакет npm font-awesome. Если вы используете npm run npm install font-awesome --save или используете пряжу, запустите yarn add font-awesome

  • Теперь вам нужно импортировать font-awesome.less в каталог less, написав import 'font-awesome/less/font-awesome.less'

Теперь вы должны увидеть, что ваши значки работают:)

Ответ 5

Я подозреваю, что вы еще не импортировали CSS, который нужен FontAwesome, - загрузите уменьшенный файл CSS с веб-сайта FontAwesome и импортируйте его в файл app.scss или где бы вы ни импортировали другие таблицы стилей.

Библиотека "Reply-fontawesome" помогает вам создавать элементы с именами классов, такими как "стрелка вверх", но без таблицы стилей ваш проект не будет знать, что есть значки, соответствующие этим классам.

Ответ 6

Единственный пример, который я получил, что на самом деле кажется актуальным и не выбрасывает "не может разрешить" реагировать "на ошибки:

https://scotch.io/tutorials/using-font-awesome-5-with-react

import React from "react";
import { render } from "react-dom";

// get our fontawesome imports
import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// create our App
const App = () => (
  <div>
    <FontAwesomeIcon icon={faHome} />
  </div>
);

// render to #root
render(<App />, document.getElementById("root"));

Ответ 7

Попробуйте добавить https://use.fontawesome.com/3bd7769ce1.js ' > в свой основной index.html в рамках своего проекта реагирования.