Как включить шрифт высокий иконка в визуализации реагировать ()

всякий раз, когда я пытаюсь использовать значок шрифта Awesome в react's render (), он не отображается на результирующей веб-странице, хотя он работает в обычном HTML.

render: function() {
    return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>;
}

вот живой пример:http://jsfiddle.net/pLWS3/

где ошибка?

9 56
reactjs font-awesome

9 ответов:

React использует className атрибут, как DOM.

Если вы используете сборку разработки и смотрите на консоль, появляется предупреждение. Вы можете увидеть это на jsfiddle.

предупреждение: неизвестный класс свойств DOM. Вы имели в виду имя?

48

если вы новый реагировать JS и с помощью create-react-app cli команда для создания приложения, а затем запустите следующую команду NPM, чтобы включить последнюю версию font-awesome.

npm install --save font-awesome

импорт шрифта-удивительный для вашего индекса.js файл. Просто добавьте строку ниже в свой индекс.js file 

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

или 

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

Не забудьте использовать имя_класса как атрибут 

 render: function() {
    return <div><i className="fa fa-spinner fa-spin">no spinner but why</i></div>;
}
173

вы также можете использовать react-fontawesome библиотека значок. Вот ссылка: react-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 для индексирования.html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

20

https://github.com/FortAwesome/react-fontawesome

установить fontawesome & 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;
8

я испытал этот случай; мне нужен сайт react / redux, который должен отлично работать в производстве.

но был "строгий режим"; не следует обедать с этими командами.

yarn global add serve
serve -s build

следует работать только с щелчком по сборке / индексу.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 ***

in public / index.HTML-код

<link rel="stylesheet" href="%PUBLIC_URL%/css/font-awesome.min.css">

после всех вышеперечисленных шагов, fontawesome работает хорошо!!!

2

сначала необходимо установить пакет.

npm install --save react-fontawesome
Или
npm i -- save @fortawesome / react-fontawesome

Не забудьте использовать имя_класса вместо класса.

далее нужно импортировать их в файл, где вы хотите их использовать.

импорт/УСБ/шрифт-удивительным.минута.css'

или

импорт FontAwesomeIcon от '@fortawesome / react-fontawesome'

2

как сказал 'Praveen M P', вы можете установить font-awesome в качестве пакета. если у вас есть пряжа вы можете запустить:

 yarn add font-awesome

Если у вас нет пряжи, сделайте, как сказал Правин, и сделайте:

npm install --save font-awesome

это добавит пакет к зависимостям ваших проектов и установит пакет в папку node_modules. в вашем приложении.js файл add 

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

ответ Александра сверху действительно помог мне!

Я пытался получить значки социальных учетных записей в нижнем колонтитуле моего приложения, которое я создал с помощью 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>

работала как обаяние.

1

оформить заказ иконки реагируют довольно долго и хорошо работал.

0