Как включить значок Font Awesome в Render () React


106

Каждый раз, когда я пытаюсь использовать значок 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/

В чем вина?


3
Обратите внимание, что некоторые старые ответы относятся к react-fontawesomev4, а некоторые к официальному @fortawesome/fontawesomeкомпоненту, который поддерживает v5.
jinglesthula

А вот текущая ссылка на response-fontawesome, который поддерживает версию 5: github.com/FortAwesome/react-fontawesome
mojave

Ответы:


59

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

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

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


возможно ли работать с reactjs 15.6, я добавил ссылку index.html <link rel = "shortcut icon" href = " maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/… "> но не могу работать
rahuldm

315

Если вы новичок в React JS и используете команду create-react-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>;
}

16
На самом деле это ответ, который лучше всего проясняет исходный вопрос.
nacho_dh

20
Просто хочу отметить, что с настройкой create-response-app вам не нужно включать ../node_modules/в путь ... import 'font-awesome/css/font-awesome.min.css';работает :)
plong0 01

2
Но таким образом, когда мы добавляем значки вроде <i className = "far fa-heart"> </i>, они не отображаются. Но если мы добавим <i className = "fa fa-heart"> </i>, он отобразится. Почему это ?
Тидаса Панкаджа, 02

3
@ThidasaParanavitharana <i className="far fa-heart"></i>работает только с font-awesome v5. Это решение устанавливает font-awesome v4
XeniaSis

33

Вы также можете использовать 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 в index.html:

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


14
Не забудьте добавить Font Awesome css в свой индекс:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
sdgfsdh

8
вам все равно нужно включать cdn, если вы устанавливаете его через npm?
Амитуууш

2
@Amituuush "Установка" FA через NPM (пока) не приводит к тому, что она должна быть. Вы всегда должны копировать его в соответствующую publicпапку и srcвручную добавлять таблицу стилей с правильными .
Domi

4
Новая ссылка на CDN: <link href = "// maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet">
guya

4
Автор response-fontawesome здесь. Вам нужно будет каким-то образом включить стили / шрифты в свое приложение, либо с версией CDN, либо с использованием чего-то вроде WebPack, либо просто ссылки на загруженные версии. Цель этой библиотеки заключалась в том, чтобы не навязывать вам такой инструмент, как WebPack,
Дана Вудман

28

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
$ npm i --save @fortawesome/fontawesome-svg-core

тогда в вашем компоненте

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поскольку это не используется в вашем примере.
gmajivu 02

@gabeno эй нет, это просто пример. Это должно просто запомнить / показать вам, что вы можете использовать и другой. Но спасибо за подсказку, я должен добавить комментарий.
Александр Сидиков Pfeif

1
Большой! просто нужно изменить этот import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'FontAwesomeIcon больше не экспорт по умолчанию.
MohitGhodasara

19
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;

15

Самое простое решение:

Установить:

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 }/>

6

Сначала вам нужно установить пакет.

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'

6

После некоторой борьбы с этим я придумал эту процедуру (основанную на документации Font Awesome здесь ):

Как уже говорилось, вам необходимо установить библиотеку значков fontawesome , react-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, а имя файла указывает фразу импорта (довольно очевидно ...), поэтому добавление значков сердитого , драгоценного камня и галочки выглядит так:

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/> 

Удачи!


5

Если вы хотите включить библиотеку 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>


4

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

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

Работал как шарм.


4
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>

2

как сказал 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'

2

Я пережил этот случай; Мне нужен сайт 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 работает НАСТОЯТЕЛЬНО !!!



0

В моем случае я следовал документации для react-fontawesomeпакета, но они не понимают, как вызывать значок при установке значков в библиотеку.

вот что я делал:

Файл App.js

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} />
gildniy
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.