堆棧內存溢出
  簡體   English   中英

"react-fontawesome 不顯示圖標"

[英]react-fontawesome not displaying icons

 原文  2017-03-01 02:41:03  2   13    reactjs/ font-awesome

問題描述

我正在嘗試使用 react-fontawesome 並以在我看來與自述文件完全相同的方式實現它： 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 開發工具中看到：

<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 還是加載 font-awesome CDN？ 任何幫助將不勝感激，謝謝！

13 個解決方案

解決方案1
 29  2017-08-01 08:36:53

我有同樣的問題。 閱讀他們的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>

解決方案2
 20  2018-04-06 06:02:25

運行npm install font-awesome --save

在您的index.js或App.js或YourComponent.js ，導入縮小的 CSS 文件。

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

解決方案3
 19  2017-12-28 18:06:38

正如其他答案所提到的，您需要以某種方式在頁面中包含圖標。 在此處查看react-fontawesome示例： https : //github.com/danawoodman/react-fontawesome/blob/master/examples/index.html

您可以看到開發人員在第 5 行包含了字體很棒的 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-more-conveniently

解決方案4
 6  2020-04-26 17:21:05

這似乎非常適合 React

安裝：

$ yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

用法：

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

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

ReactDOM.render(element, document.body)

字體真棒 5 反應

解決方案5
 5  2018-12-03 01:28:57

我工作的唯一示例實際上似乎是最新的並且沒有拋出“無法解決‘反應’錯誤：

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"));

解決方案6
 3  2017-10-29 18:04:17

正如@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'

現在你應該看到你的圖標在工作:)

解決方案7
 3  2021-09-09 19:10:58

Font Awesome 現在有一個官方的 React 組件，可以在你的 React 應用程序中使用它們的圖標。

第 1 步：你必須使用像 npm 這樣的包管理器在你的項目中安裝 3 個重要的包：

    npm i --save @fortawesome/fontawesome-svg-core
    npm install --save @fortawesome/free-solid-svg-icons
    npm install --save @fortawesome/react-fontawesome

第 2 步：如果您打算設計圖標樣式，則必須下載這兩個額外的包：

     npm install --save @fortawesome/free-brands-svg-icons
     npm install --save @fortawesome/free-regular-svg-icons

第 3 步：安裝項目所需的所有包后，現在可以使用圖標了。 像這樣在你的組件中導入這個包：

   import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

之后，您可以像這樣將圖標導入您的組件（例如使用類為“fas fa-atom”的圖標）

   import { faAtom } from '@fortawesome/free-solid-svg-icons'

PS：您可以在一次導入中導入多個圖標，並在每個圖標之間添加一個逗號。

第 4 步：使用導入的圖標

const element = <FontAwesomeIcon icon={faAtom} />

來源： https ://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react

解決方案8
 1  2021-02-21 23:42:52

從包本身導入 fontawesome 樣式而不加載任何外部 css：

import "@fortawesome/fontawesome-svg-core/styles.css"; // import Font Awesome CSS
import { config } from "@fortawesome/fontawesome-svg-core";
config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above

查看文章以獲取更多信息

解決方案9
 0  2017-04-12 01:01:22

我懷疑您還沒有導入 FontAwesome 需要的 CSS - 從 FontAwesome 的網站下載縮小的 CSS 文件並將其導入您的 app.scss 文件或您導入其他樣式表的任何其他地方。

react-fontawesome 庫正在幫助您創建類名類似於“向上箭頭”的元素，但如果沒有樣式表，您的項目將不知道有與這些類對應的圖標。

解決方案10
 0  2020-04-27 03:16:13

最好一次安裝所有東西，然后只導入你想要的圖標，

npm i --save @fortawesome/fontawesome-svg-core  @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome  @fortawesome/free-brands-svg-icons  @fortawesome/free-regular-svg-icons

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';

確保從確切的包中導入圖標，您可以使用ctrl + space使用建議的力量來查找圖標並在導入圖標時更改包。

解決方案11
 0  2021-08-06 21:36:55

復制並粘貼到您的 html 中...

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">

解決方案12
 0  2022-01-30 20:05:42

NEXT JS - 如果您使用 NEXT jS，請以這種方式導入樣式

import '../node_modules/@fortawesome/fontawesome-svg-core/styles.css'

解決方案13
 -3  2017-03-08 16:20:47

嘗試添加

<script src='https://use.fontawesome.com/3bd7769ce1.js'></script>

到您的反應項目中的主 index.html。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 react-fontawesome 圖標沒有出現 react-fontawesome 導入所有圖標 整合react和react-fontawesome 如何使用react-fontawesome層 SVG圈子中的React-FontAwesome Unicode值 找不到模塊'@fortawesome/react-fontawesome 找不到圖標 react-fontawesome 映射和顯示 Fontawesome 圖標 設置 favicon 后，React-FontAwesome 圖標不會出現 嘗試根據當前 state 有條件地渲染 react-fontawesome 圖標
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM