Каждый раз, когда я пытаюсь использовать значок 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/
В чем вина?
reactjs
font-awesome
user3127060
источник
источник
react-fontawesome
v4, а некоторые к официальному@fortawesome/fontawesome
компоненту, который поддерживает v5.Ответы:
React использует
className
атрибут, как DOM.Если вы используете сборку разработки и посмотрите на консоль, появится предупреждение. Вы можете увидеть это на jsfiddle.
источник
Если вы новичок в React JS и используете команду create-react-app cli для создания приложения, выполните следующую команду NPM, чтобы включить последнюю версию 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>; }
источник
../node_modules/
в путь ...import 'font-awesome/css/font-awesome.min.css';
работает :)<i className="far fa-heart"></i>
работает только с font-awesome v5. Это решение устанавливает font-awesome v4Вы также можете использовать
react-fontawesome
библиотеку значков. Вот ссылка: react-fontawesomeСо страницы NPM просто установите через npm:
Требуется модуль:
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">
источник
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
public
папку иsrc
вручную добавлять таблицу стилей с правильными .https://github.com/FortAwesome/react-fontawesome
установить fontawesome и react-fontawesome
тогда в вашем компоненте
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;
источник
@fortawesome/fontawesome-free-regular
поскольку это не используется в вашем примере.import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
FontAwesomeIcon больше не экспорт по умолчанию.в 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;
источник
Самое простое решение:
Установить:
Импортировать:
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faThumbsUp } from '@fortawesome/free-solid-svg-icons';
Использование:
источник
Сначала вам нужно установить пакет.
ИЛИ
Не забывайте использовать
className
вместоclass
.Позже вам нужно будет импортировать их в файл, в котором вы хотите их использовать.
import 'font-awesome/css/font-awesome.min.css'
или
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
источник
После некоторой борьбы с этим я придумал эту процедуру (основанную на документации Font Awesome здесь ):
Как уже говорилось, вам необходимо установить библиотеку значков fontawesome , react-fontawesome и 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)
А вот и сложная часть:
Чтобы изменить или добавить значки, вам нужно будет найти доступные значки в библиотеке модулей узла, т.е.
У каждого значка есть два соответствующих файла: .js и .d.ts, а имя файла указывает фразу импорта (довольно очевидно ...), поэтому добавление значков сердитого , драгоценного камня и галочки выглядит так:
import { faStroopwafel, faAngry, faGem, faCheckCircle } from '@fortawesome/free-solid-svg-icons' library.add(faStroopwafel, faAngry, faGem, faCheckCircle)
Чтобы использовать значки в коде React js, используйте:
Имя значка можно найти в файле .js соответствующего значка:
например, для faCheckCircle загляните в faCheckCircle.js для переменной ' iconName ':
... var iconName = 'check-circle'; ...
и код React должен выглядеть так:
Удачи!
источник
Если вы хотите включить библиотеку font awesome без необходимости импорта модулей и установки npm, поместите ее в головной раздел страницы React index.html :
public / index.html (в головном разделе)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
Затем в вашем компоненте (например, App.js) просто используйте стандартное соглашение о классах шрифтов. Просто не забудьте использовать className вместо class:
<button className='btn'><i className='fa fa-home'></i></button>
источник
Мне очень помог ответ Александра сверху!
Я пытался разместить значки социальных учетных записей в нижнем колонтитуле моего приложения, которое я создал с помощью ReactJS, чтобы я мог легко добавить к ним состояние наведения, а также связать их с моими учетными записями в социальных сетях. Вот что мне пришлось сделать:
Затем в верхней части моего нижнего колонтитула я включил это:
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>
Работал как шарм.
источник
npm install --save font-awesome import 'font-awesome/css/font-awesome.min.css';
тогда
<i className="fa fa-shopping-cart" style={{fontSize:24}}></i> <span className="badge badge-danger" style={{position:"absolute", right:5, top:5}}>number of items in cart</span>
источник
как сказал Praveen MP, вы можете установить font-awesome в виде пакета. если у вас есть пряжа, вы можете запустить:
Если у вас нет пряжи, сделайте так, как сказал Правин, и сделайте:
это добавит пакет к вашим зависимостям проекта и установит пакет в вашу папку node_modules. в вашем файле App.js добавьте
import 'font-awesome/css/font-awesome.min.css'
источник
Я пережил этот случай; Мне нужен сайт response / redux, который должен отлично работать в продакшене.
но был «строгий режим»; Не стоит обедать с этими командами.
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">
После всех вышеперечисленных шагов fontawesome работает НАСТОЯТЕЛЬНО !!!
источник
Касса реагирует на значки довольно круто и работает хорошо.
источник
В моем случае я следовал документации для
react-fontawesome
пакета, но они не понимают, как вызывать значок при установке значков в библиотеку.вот что я делал:
import {faCoffee} from "@fortawesome/pro-light-svg-icons"; library.add(faSearch, faFileSearch, faCoffee);
<FontAwesomeIcon icon={"coffee"} />
Но я получал эту ошибку
Затем я добавил псевдоним при передаче свойства значка, например:
<FontAwesomeIcon icon={["fal", "coffee"]} />
И он работает, вы можете найти значение префикса в файле icon.js, в моем случае это было: faCoffee.js
источник
<FontAwesomeIcon icon={faCoffee} />