Всякий раз, когда я пытаюсь использовать значок Font Awesome в React render(), он не отображается на конечной веб-странице, хотя он работает в обычном HTML.
render: function() {
return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>;
}
Вот живой пример: http://jsfiddle.net/pLWS3/
Где вина?
React использует атрибут className, например DOM.
Если вы используете сборку разработки и смотрите на консоль, появляется предупреждение. Вы можете увидеть это на jsfiddle.
Предупреждение: Неизвестный класс свойств DOM. Вы имели в виду className?
Если вы новичок в React JS и используете команду create-Reaction-app cli для создания приложения, выполните следующую команду NPM, чтобы включить последнюю версию font-awesome.
npm install --save font-awesome
импортировать font-awesome в ваш файл index.js Просто добавьте строку ниже в ваш файл index.js
import '../node_modules/font-awesome/css/font-awesome.min.css';
или же
import 'font-awesome/css/font-awesome.min.css';
Не забудьте использовать className в качестве атрибута
render: function() {
return <div><i className="fa fa-spinner fa-spin">no spinner but why</i></div>;
}
Вы также можете использовать библиотеку значков react-fontawesome. Вот ссылка: реагировать-Fontawesome
На странице NPM просто установите через npm:
npm install --save react-fontawesome
Требуется модуль:
var FontAwesome = require('react-fontawesome');
И, наконец, используйте компонент <FontAwesome/> и передайте атрибуты, чтобы указать значок и стиль:
var MyComponent = React.createClass({
render: function () {
return (
<FontAwesome
className='super-crazy-colors'
name='rocket'
size='2x'
spin
style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
/>
);
}
});
Не забудьте добавить удивительный шрифт CSS в index.html:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
https://github.com/FortAwesome/react-fontawesome
установить потрясающе и реагировать потрясающе
$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome
$ npm i --save @fortawesome/fontawesome-free-solid
$ npm i --save @fortawesome/fontawesome-free-regular
чем в вашем компоненте
import React, { Component } from 'react';
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faCheckSquare, faCoffee } from '@fortawesome/fontawesome-free-solid'
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<h1>
<FontAwesomeIcon icon={faCoffee} />
</h1>
</div>
);
}
}
export default App;
Самое простое решение:
Установка:
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome
Импортировать:
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faThumbsUp } from '@fortawesome/free-solid-svg-icons';
Использование:
<FontAwesomeIcon icon={ faThumbsUp }/>
Вы должны установить пакет в первую очередь.
npm install --save react-fontawesome
ИЛИ ЖЕ
npm i --save @fortawesome/react-fontawesome
Не забудьте использовать className вместо class.
Позже вам нужно импортировать их в файл, где вы хотите их использовать.
import 'font-awesome/css/font-awesome.min.css'
или же
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
После того, как я некоторое время боролся с этим, я придумал эту процедуру (основываясь на документации Font Awesome здесь):
Как уже было сказано, вам необходимо установить библиотеку fontawesome, response-fontawesome и библиотеку fontawesome:
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/react-fontawesome
а затем импортируйте все в приложение React:
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faStroopwafel } from '@fortawesome/free-solid-svg-icons'
library.add(faStroopwafel)
Здесь начинается сложная часть:
Чтобы изменить или добавить значки, вам нужно найти доступные значки в библиотеке модулей вашего узла, то есть
<your_project_path>\node_modules\@fortawesome\free-solid-svg-icons
У каждого значка есть два соответствующих файла:.js и .d.ts, а имя файла указывает на фразу для импорта (довольно очевидно...), поэтому добавьте angry, gem и значки галочек выглядят так:
import { faStroopwafel, faAngry, faGem, faCheckCircle } from '@fortawesome/free-solid-svg-icons'
library.add(faStroopwafel, faAngry, faGem, faCheckCircle)
Чтобы использовать значки в коде React js, используйте:
<FontAwesomeIcon icon=icon_name/>
Имя значка можно найти в соответствующем файле значка .js:
например для faCheckCircle загляните внутрь faCheckCircle.js для переменной iconName:
...
var iconName = 'check-circle';
...
и код React должен выглядеть следующим образом:
<FontAwesomeIcon icon=check-circle/>
Гудлак!
Ответ Александра сверху действительно помог мне!
Я пытался добавить значки социальных учетных записей в нижний колонтитул моего приложения, которое я создал с помощью ReactJS, чтобы можно было легко добавлять к ним состояние наведения и одновременно связывать их с моими социальными учетными записями. Это то, что мне пришлось сделать:
$ npm i --save @fortawesome/fontawesome-free-brands
Затем в верхней части моего компонента нижнего колонтитула я включил это:
import React from 'react';
import './styles/Footer.css';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import {faTwitter, faLinkedin, faGithub} from '@fortawesome/fontawesome-free-brands';
Мой компонент тогда выглядел так:
<a href='https://github.com/yourusernamehere'>
<FontAwesomeIcon className ='font-awesome' icon={faGithub} />
</a>
Работал как шарм.
Я пережил этот случай; Мне нужен сайт реакции/редукса, который должен отлично работать на производстве.
но был "строгий режим"; Не стоит обедать с этими командами.
yarn global add serve
serve -s build
Если вы хотите работать только нажмите файл build/index.html. Когда я использовал fontawesome с npm font-awesome, он работал в режиме разработки, но не работал в "строгом режиме".
Вот мое решение:
public/css/font-awesome.min.css
public/fonts/font-awesome.eot
*** other different types of files(4) ***
*** I copied these files for node_module/font-awesome ***
*** after copied then can delete the font-awesome from package.json ***
в public/index.html
<link rel="stylesheet" href="%PUBLIC_URL%/css/font-awesome.min.css">
После всех вышеперечисленных шагов, потрясающе работает прекрасно!
как сказал Praveen MP, вы можете установить font-awesome как пакет. если у вас есть пряжа, вы можете запустить:
yarn add font-awesome
Если у вас нет пряжи, делайте так, как сказал Правин, и делайте:
npm install --save font-awesome
это добавит пакет к вашим проектным зависимостям и установит пакет в вашу папку node_modules. в вашем файле App.js добавить
import 'font-awesome/css/font-awesome.min.css'
npm install --save-dev @fortawesome/fontawesome-free
в index.js
import '@fortawesome/fontawesome-free/css/all.min.css';
затем используйте значки, как показано ниже:
import React, { Component } from "react";
class Like extends Component {
state = {};
render() {
return <i className="fas fa-heart"></i>;
}
}
export default Like;
Оформить заказ, отреагировали на иконки довольно дури и сработали хорошо
В моем случае я следовал документации для пакета react-fontawesome, но они не понимают, как вызывать значок при установке значков в библиотеку
это было то, что я делал:
App.js file
import {faCoffee} from "@fortawesome/pro-light-svg-icons";
library.add(faSearch, faFileSearch, faCoffee);
Файл компонента
<FontAwesomeIcon icon={"coffee"} />
Но я получаю эту ошибку
Затем я добавил псевдоним при передаче значка проп:
<FontAwesomeIcon icon={["fal", "coffee"]} />
И это работает, вы можете найти значение префикса в файле icon.js, в моем случае это было: faCoffee.js