gpt4 book ai didi

reactjs - React-fontawesome 不显示图标

转载 作者:行者123 更新时间:2023-12-03 13:02:53 25 4
gpt4 key购买 nike

我正在尝试使用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”中,图标仍然没有显示。

我的插件中有 add-module-exports,webpack.config 的预设中有 stage-2。

谁能告诉我我是否遗漏了什么?除了react-fontawesome 之外,我还需要其他包才能完成这项工作吗?我需要导入标准 font-awesome.css 或加载 font-awesome CDN 吗?任何帮助将不胜感激,谢谢!

最佳答案

我也遇到了同样的问题。阅读他们的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.

所以最简单的方法是在 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>

关于reactjs - React-fontawesome 不显示图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42522233/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com