问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

react-fontawesome 不显示图标

社区维基
1
新手上路，请多包涵

我正在尝试使用 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？任何帮助将不胜感激，谢谢！

原文由 currenthandle 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译reactjsfont-awesome
阅读 443
1 个回答
得票最新
社区维基
1

我有同样的问题。阅读他们的 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>

原文由 Alee 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进