堆栈内存溢出
  繁体   English   中英

"react-fontawesome 不显示图标"

[英]react-fontawesome not displaying icons

 原文  2017-03-01 02:41:03  3   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