web-dev-qa-db-ja.com

react-fontawesomeアイコンが表示されない

React-fontawesomeを使用して、readmeとまったく同じように見えるように実装しようとしています： https://github.com/danawoodman/react-fontawesome/blob/master/readme。 md

import React from 'react';
import FontAwesome from 'react-fontawesome'
...
export default class ComponentName extends React.Component {
    render() {
        return (
            <div>
                <div>
                    <span>
                        <FontAwesome
                            className='super-crazy-colors'
                            name='rocket'
                            size='2x'
                            spin
                            style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
                        />
                        SOME TEXT
                    </span>
                </div>
                ...
            </div>
        )
    }
}

しかし、DOMにアイコンが表示されていません。 Chrome Dev Tools：

<span style="text-shadow:0 1px 0 rgba(0, 0, 0, 0.1);" aria-hidden="true" class="fa fa-rocket fa-2x fa-spin super-crazy-colors" data-reactid=".0.$/=11.0.0.$/=10.$/=10.$/=10"></span>

<i>タグにすべきだと思います。開発ツールの「HTMLとして編集」で<span>...</span>を<i>...</i>に変更しようとしましたが、アイコンが表示されませんでした。

プラグインにadd-module-exportsがあり、webpack.configのプリセットにstage-2があります。

誰かが私が何かを見逃しているのなら教えてくれますかこの作業を行うには、react-fontawesome以外のパッケージが必要ですか？標準のfont-awesome.cssをインポートする必要がありますか、それともフォントが素晴らしいCDNをロードする必要がありますか？どんな助けでも大歓迎です、ありがとう！

reactjsfont-awesome
18
Casey

同じ問題がありました。彼らの Readme.md を読むと、このメモがあることがわかります：

注：このコンポーネントにはFont AwesomeのCSSやフォントは含まれていないため、ビルドプロセスに追加するか、ビルドプロセスに追加するか、 CDNバージョン 。へのリンク

したがって、最も簡単な方法は、HTMLのfontawesome cdnにリンクすることです。

<head>
<meta charset="UTF-8">    
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" 
crossorigin="anonymous">
</head>
20
Alee

他の回答が言及しているように、何らかの形でページにアイコンを含める必要があります。 react-fontawesome例： https://github.com/danawoodman/react-fontawesome/blob/master/examples/index.html

開発者が5行目にfont-awesome CSSを含めていることがわかります。

別の注意として、Font Awesome v5がリリースされました。移行を検討する必要があります。こちらの関連​​ドキュメントをご覧ください。 https://www.npmjs.com/package/@fortawesome/react-fontawesome

V5を使用するには：

依存関係をインストールします。

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome
$ npm i --save @fortawesome/fontawesome-free-solid

コンポーネントは次のようなアイコンを使用できます。

import ReactDOM from 'react-dom';
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/fontawesome-free-solid'

const element = (
  <FontAwesomeIcon icon={faCoffee} />
)

ReactDOM.render(element, document.body);

また、簡単に参照できるように、アプリで一般的に使用されるアイコンのライブラリを構築することもできます。ここで作業コードを確認してください： https://codesandbox.io/s/8y251kv448

ここで利用可能なライブラリ関数の詳細： https://www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-もっと便利に

12
Shishir

実行npm install font-awesome --save

あなたのindex.jsまたはApp.jsまたはYourComponent.js、縮小されたCSSファイルをインポートします。

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

@Aleeが指摘したように、Fontaweomeフォントはパッケージに含まれていません。自分でインポートする必要があります。

  1. Npm font-awesomeパッケージをインストールします。 npm run npm install font-awesome --saveを使用する場合、またはyarnを使用する場合はyarn add font-awesomeを実行します

  2. font-awesome.lessと記述することで、lessディレクトリの下にimport 'font-awesome/less/font-awesome.less'をインポートするだけです。

これで、アイコンが機能していることがわかります。

2
Sisir

FontAwesomeが必要とするCSSをまだインポートしていないと思われます-FontAwesomeのWebサイトから縮小したCSSファイルをダウンロードし、app.scssファイルにインポートするか、他のスタイルシートをインポートする場所にインポートします。

React-fontawesomeライブラリは、「上矢印」などのクラス名を持つ要素の作成を支援しますが、スタイルシートがないと、プロジェクトはそれらのクラスに対応するアイコンがあることを認識しません。

0
N.L.

実際に最新のように見え、「「react」エラーを解決できません」をスローしなかった私が働いた唯一の例：

https://scotch.io/tutorials/using-font-awesome-5-with-react

import React from "react";
import { render } from "react-dom";

// get our fontawesome imports
import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// create our App
const App = () => (
  <div>
    <FontAwesomeIcon icon={faHome} />
  </div>
);

// render to #root
render(<App />, document.getElementById("root"));
0
blah blah