Cas*_*sey 19 font-awesome reactjs
我正在尝试使用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>标签.我试图改变<span>...</span>一个<i>...</i>在开发工具中的"编辑为HTML"和图标仍然没有显示.
我在我的插件中添加了模块导出,在我的webpack.config中的预设中添加了stage-2.
谁能告诉我,如果我错过了什么？除了react-fontawesome之外,我还需要一些其他软件包吗？我是否需要导入标准字体-awesome.css或加载字体真棒CDN？任何帮助将不胜感激,谢谢!
Ale*_*lee 23
我有同样的问题.阅读他们的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>
sel*_*oui 14
Font Awesome 现在有一个官方的 React 组件，\xe2\x80\x99s 可以在你的 React 应用程序中使用它们的图标。
\n第 1 步： \n您必须使用 npm 等包管理器在项目中安装 3 个重要的包：
\n npm i --save @fortawesome/fontawesome-svg-core\n npm install --save @fortawesome/free-solid-svg-icons\n npm install --save @fortawesome/react-fontawesome\n第 2 步： \n如果您打算设计图标样式，则必须下载这两个额外的软件包：
\n npm install --save @fortawesome/free-brands-svg-icons\n npm install --save @fortawesome/free-regular-svg-icons\n第 3 步： \n一旦您\xe2\x80\x99 安装了项目所需的所有软件包，现在您就可以使用图标了。\n将此软件包导入您的组件中，如下所示：
\n import { FontAwesomeIcon } from \'@fortawesome/react-fontawesome\'\n之后，您可以像这样将图标导入到组件中（例如\n使用类为“fas fa-atom”的图标）
\n import { faAtom } from \'@fortawesome/free-solid-svg-icons\'\nPS：您可以在一次导入中导入多个图标，并在每个图标之间添加逗号。
\n步骤 4： \n使用导入的图标
\nconst element = <FontAwesomeIcon icon={faAtom} />\n来源：https ://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react
\nShi*_*hir 12
正如其他答案所提到的,您需要以某种方式在页面中包含图标.看看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
Lan*_*ghe 11
跑 npm install font-awesome --save
在您index.js或App.js或中YourComponent.js,导入缩小的CSS文件.
import 'font-awesome/css/font-awesome.min.css';
小智 6
这似乎非常适合 React
安装：
$ yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
用法：
$ yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
我工作的唯一示例实际上似乎是最新的并且没有抛出“无法解决‘反应’错误：
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"));
小智 -1
尝试添加
<script src='https://use.fontawesome.com/3bd7769ce1.js'></script>
到你的反应项目中的主index.html。
| 归档时间： |
|
| 查看次数： |
18773 次 |
| 最近记录： |