Reactのrender（）にFont Awesomeアイコンを含める方法

ReactのFont Awesomeアイコンを使おうとすると、render()通常のHTMLでは機能しますが、結果のWebページには表示されません。

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

これが実際の例です：http : //jsfiddle.net/pLWS3/

欠点はどこですか？

ReactはclassNameDOMのような属性を使用します。

開発ビルドを使用してコンソールを確認すると、警告が表示されます。これはjsfiddleで確認できます。

警告：DOMプロパティクラスが不明です。あなたはclassNameを意味しましたか？

あなたがいる場合はJSを反応させるために、新規および使用して作成反応するアプリCLIアプリケーションを作成するためのコマンドを、その後、フォント素晴らしいの最新バージョンを含めるために、次のNPMコマンドを実行します。

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アイコンライブラリを使用することもできます。ここにリンクがあります：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)' }}
      />
    );
  }
});

font.awesome 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

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;

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;

最も簡単な解決策は次のとおりです。

インストール：

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

各アイコンは、2つの関連ファイルがあります：.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/> 

幸運を！

上からのアレクサンダーの答えは本当に私を助けました！

私は、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>

魅力のように働いた。

モジュールのインポートやnpmのインストールを行わずにfont awesomeライブラリを含める場合は、これを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を使用することを忘れないでください：

<button className='btn'><i className='fa fa-home'></i></button>

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>

私はこの事件を経験しました。本番環境で完全に機能するreact / reduxサイトが必要です。

しかし、「厳格モード」がありました。これらのコマンドで昼食をとるべきではありません。

yarn global add serve
serve -s build

build / index.htmlファイルをクリックするだけで動作するはずです。npm font-awesomeでfontawesomeを使用すると、開発モードでは機能しましたが、「ストリクトモード」では機能しませんでした。

これが私の解決策です：

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はうまく動作します!!!

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

Checkout 反応アイコンはかなりドープで、うまく機能しました。

私の場合、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でした。