Reactのrender()
でFont Awesomeアイコンを使用しようとすると、通常のHTMLでは機能しますが、結果のWebページには表示されません。
render: function() {
return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>;
}
以下に実際の例を示します。 http://jsfiddle.net/pLWS3/
障害はどこにありますか?
Reactは、DOMと同様にclassName
属性を使用します。
開発ビルドを使用してコンソールを見ると、警告があります。これはjsfiddleで確認できます。
警告:不明なDOMプロパティクラス。 classNameを意味しましたか?
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>;
}
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
あなたのコンポーネントよりも
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
OR
npm i --save @fortawesome/react-fontawesome
className
の代わりにclass
を使用することを忘れないでください。
後で、使用したいファイルにそれらをインポートする必要があります。
import 'font-awesome/css/font-awesome.min.css'
または
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
しばらくこれに苦労した後、私はこの手順を思いつきました(Font Awesomeのドキュメント here に基づいて):
前述のように、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があり、ファイル名はインポートフレーズを示します(かなり明白です...)ので、angry、gemおよびcheck-markアイコンは次のようになります。
import { faStroopwafel, faAngry, faGem, faCheckCircle } from '@fortawesome/free-solid-svg-icons'
library.add(faStroopwafel, faAngry, faGem, faCheckCircle)
React jsコードでアイコンを使用するには、次を使用します。
<FontAwesomeIcon icon=icon_name/>
アイコン名は、関連するアイコンの.jsファイルにあります。
例えばforfaCheckCircle内部を見るfaCheckCircle.jsfor '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">
上記のすべてのステップの後、fontawesomeはうまく動作します!!!
「Praveen M P」が言ったように、font-awesomeをパッケージとしてインストールできます。糸がある場合は、次を実行できます。
yarn add font-awesome
あなたが糸を持っていない場合、プラヴィーンが言ったようにしてください:
npm install --save font-awesome
これにより、パッケージがプロジェクトの依存関係に追加され、node_modulesフォルダーにパッケージがインストールされます。 App.jsファイルに追加します
import 'font-awesome/css/font-awesome.min.css'
チェックアウト 反応アイコン かなりドープで、うまく機能しました。