"react-fontawesome 不显示图标"
[英]react-fontawesome not displaying icons
问题描述
I'm attempting to using react-fontawesome and implementing it in what seems to me to be exactly the same as the readme: https://github.com/danawoodman/react-fontawesome/blob/master/readme.md
我正在尝试使用 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>
)
}
}
But I'm not seeing an icon in the DOM.但我在 DOM 中没有看到图标。 Although I do see in the Chrome Dev Tools:虽然我确实在 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>
which I feel like should be a <i> tag.我觉得应该是一个<i>标签。 I tried changing the <span>...</span> to an <i>...</i> in "edit as HTML" in the dev tools and the icon still didn't show.我尝试在开发工具的“编辑为 HTML”中将<span>...</span>更改为<i>...</i> ，但图标仍然没有显示。
I have add-module-exports in my plugins and stage-2 in my presets in my webpack.config.我的插件中有 add-module-exports，webpack.config 的预设中有 stage-2。
Can anyone tell me if I'm missing something?谁能告诉我我是否遗漏了什么？ Do I need some other package other than react-fontawesome to make this work?除了 react-fontawesome 之外，我还需要其他软件包来完成这项工作吗？ Do I need to import the standard font-awesome.css or load a font-awesome CDN?我需要导入标准 font-awesome.css 还是加载 font-awesome CDN？ Any help would be greatly appreciated, thanks!任何帮助将不胜感激，谢谢！
13 个解决方案
解决方案1
29 2017-08-01 08:36:53
I had the same problem.我有同样的问题。 Read their Readme.md , and you see that there is this note:阅读他们的Readme.md ，你会看到有这样的注释：
Note: This component does not include any of the Font Awesome CSS or fonts, so you'll need to make sure to include those on your end somehow, either by adding them to your build process or linking to CDN versions .
So the most simple way is to link to the fontawesome cdn in your html.所以最简单的方法是链接到你的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
Run npm install font-awesome --save运行npm install font-awesome --save
In your index.js or App.js or YourComponent.js , import the minified CSS file.在您的index.js或App.js或YourComponent.js ，导入缩小的 CSS 文件。
import 'font-awesome/css/font-awesome.min.css';
解决方案3
19 2017-12-28 18:06:38
As the other answers mention, you need to include the icons in your page somehow.正如其他答案所提到的，您需要以某种方式在页面中包含图标。 Check out the react-fontawesome example here: https://github.com/danawoodman/react-fontawesome/blob/master/examples/index.html在此处查看react-fontawesome示例： https : //github.com/danawoodman/react-fontawesome/blob/master/examples/index.html
You can see that the developer has included the font-awesome CSS on line #5.您可以看到开发人员在第 5 行包含了字体很棒的 CSS。
On a separate note, Font Awesome v5 has been released, and you should consider moving to it.另外，Font Awesome v5 已经发布，你应该考虑转向它。 Read relevant docs here: https://www.npmjs.com/package/@fortawesome/react-fontawesome在此处阅读相关文档： https : //www.npmjs.com/package/@fortawesome/react-fontawesome
To use v5:要使用 v5：
Install dependencies:安装依赖：
$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome
$ npm i --save @fortawesome/fontawesome-free-solid
Your component can then use icons like so:然后您的组件可以使用如下图标：
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);
You can also build a library of commonly used icons in your app, for easy reference.您还可以在您的应用程序中构建一个常用图标库，以方便参考。 Check out working code here: https://codesandbox.io/s/8y251kv448在此处查看工作代码： https : //codesandbox.io/s/8y251kv448
More details about the library function available here: https://www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently有关此处提供的库函数的更多详细信息： 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
This seems to work perfectly for React这似乎非常适合 React
Installation:安装：
$ yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
Usage:用法：
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 2018-12-03 01:28:57
The only example I got working that actually seems up-to-date and didn't throw "can't resolve 'react' errors:我工作的唯一示例实际上似乎是最新的并且没有抛出“无法解决‘反应’错误：
https://scotch.io/tutorials/using-font-awesome-5-with-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"));
解决方案6
3 2017-10-29 18:04:17
As @Alee pointed out Fontaweome fonts aren't included in the package.正如@Alee 指出的 Fontaweome 字体不包含在包中。 You will have to import it yourself.您必须自己导入它。
Install npm
font-awesomepackage.安装 npm font-awesome包。 If you use npm runnpm install font-awesome --saveor if you use yarn then runyarn add font-awesome如果你使用 npm run npm install font-awesome --save或者如果你使用 yarn 然后运行yarn add font-awesomeNow you just have to import
font-awesome.lessunderlessdirectory by writingimport 'font-awesome/less/font-awesome.less'现在，你只需要输入font-awesome.less下less目录写import 'font-awesome/less/font-awesome.less'
Now you should see your icons working :)现在你应该看到你的图标在工作:)
解决方案7
3 2021-09-09 19:10:58
Font Awesome now has an official React component that's available to use their icons in your React applications. Font Awesome 现在有一个官方的 React 组件，可以在你的 React 应用程序中使用它们的图标。
Step 1 : you must install 3 important packages in your project using a package manager like npm:第 1 步：你必须使用像 npm 这样的包管理器在你的项目中安装 3 个重要的包：
npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome
Step 2 : if you're planning on styling the icons you must download these two extra packages :第 2 步：如果您打算设计图标样式，则必须下载这两个额外的包：
npm install --save @fortawesome/free-brands-svg-icons
npm install --save @fortawesome/free-regular-svg-icons
Step 3: Once you've installed all the packages you need for your project, now you can use the icons.第 3 步：安装项目所需的所有包后，现在可以使用图标了。 Import this packages in your component like this:像这样在你的组件中导入这个包：
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
After that you can import an icon into your component like this (example using an icon with the class as "fas fa-atom")之后，您可以像这样将图标导入您的组件（例如使用类为“fas fa-atom”的图标）
import { faAtom } from '@fortawesome/free-solid-svg-icons'
PS : you can import multiple icons in one import with adding a coma between each one. PS：您可以在一次导入中导入多个图标，并在每个图标之间添加一个逗号。
Step 4 : use the imported icons第 4 步：使用导入的图标
const element = <FontAwesomeIcon icon={faAtom} />
SOURCE : https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react来源： https ://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react
解决方案8
1 2021-02-21 23:42:52
import fontawesome styles from the package itself without loading any external css:从包本身导入 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
I suspect that you have not yet imported the CSS that FontAwesome needs - download the minified CSS file from FontAwesome's Web site and import it into your app.scss file or wherever else you're importing other stylesheets.我怀疑您还没有导入 FontAwesome 需要的 CSS - 从 FontAwesome 的网站下载缩小的 CSS 文件并将其导入您的 app.scss 文件或您导入其他样式表的任何其他地方。
The react-fontawesome library is helping you create elements with class names like 'up-arrow', but without the stylesheet, your project will not know that there are icons corresponding to those classes. react-fontawesome 库正在帮助您创建类名类似于“向上箭头”的元素，但如果没有样式表，您的项目将不知道有与这些类对应的图标。
解决方案10
0 2020-04-27 03:16:13
Better to install everything all at once and then only import the icon you want,最好一次安装所有东西，然后只导入你想要的图标，
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';
make sure to import the icon from the exact pack, you can use ctrl + space to use the power of suggections to fiding icons and for changing pack when your importing icon.确保从确切的包中导入图标，您可以使用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
Try adding尝试添加
<script src='https://use.fontawesome.com/3bd7769ce1.js'></script>
to your main index.html within your react project.到您的反应项目中的主 index.html。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.