【问题标题】:Font Awesome icon is not appearing in react application字体真棒图标未出现在反应应用程序中
【发布时间】:2021-06-07 23:23:34
【问题描述】:
I Install all 3 required modules in react app.
npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

I am trying to add font awesome icon in my program. But it is not showing up.Do I need to copy Font Awesome link and add in my app. That's what I used to do it in my html program. 

(例如)

但是在react中怎么做呢?我尝试了文档中的方式,但它不起作用。我只添加了我的程序的一部分。请帮助。

import React  from 'react';
import { Form, Button} from 'react-bootstrap';
import './ContactUs.css';
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faShare} from '@fortawesome/free-solid-svg-icons'
library.add(fab, faCheckSquare, faShare)

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
// import { faShare } from '@fortawesome/free-solid-svg-icons'

class ContactUs extends React.Component{
    
    render(){
        return(
            <div>
               <Button className="btn send-button mt-4"> 
                  SUBMIT
                    <FontAwesomeIcon icon="share" />
                  </Button>
            </div>
        )
    }
}
export default  ContactUs;

【问题讨论】:

    标签: reactjs fonts font-awesome


    【解决方案1】:

    除了一件事,我没有发现任何问题。 当您使用单个图标而不是 &lt;FontAwesomeIcon icon="share" /&gt; 您必须像这样使用 write &lt;FontAwesomeIcon icon={faShare} /&gt;

    请查看以下链接以供参考。 https://codesandbox.io/s/frosty-glade-9ful6?file=/src/App.js

    【讨论】:

    • 我试过了 错误来了说 Import in body of module;重新排序到顶部导入/第一行 83:42:未定义“共享”
    • 你不需要library.add(fab, faCheckSquare, faShare)这一行,所有的导入都应该放在最前面。导入之间不应有任何其他代码。确保你遵循这个。
    • 未定义相同错误发生的共享。
    • 让我检查沙盒
    • 好的 知道了 而不是
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-09-15
    • 2019-04-13
    • 2020-11-30
    • 2018-09-21
    • 2022-11-10
    • 2021-12-03
    相关资源
    最近更新 更多