如何在 React.js 中使用 Font Awesome答案

【问题标题】：How can I use Font Awesome in React.js如何在 React.js 中使用 Font Awesome
【发布时间】：2020-12-25 09:45:41
【问题描述】：

如何在 React js 中使用 Font Awesome？如果我在我的项目中使用它，它不会出现。这是我的代码：

import React ,{Component} from 'react'
import './category.css'
import axios from 'axios'
import Course from './courses/course.js'
import Searchfilter from './search/search.js'

class Category extends Component{
    state={
        category :[]
    }
    componentDidMount(){
        axios.get('data.json').then(res =>{this.setState({category:res.data.content})
    })
    }
    render(){
  return (
    <div className="category">
      
      <Course corses={this.state.category} />
    </div>
  )
}
}
export default Category;

【问题讨论】：

你的意思是字体真棒？？
哦对 :D 你知道我怎么用它
Font Awesome 有一个 dedicated page 来帮助您使用 React 获得有效的实现。

标签： javascript reactjs font-awesome

【解决方案1】：

在 index.html 文件的头部添加这个（CDN 链接）：

<script src="https://kit.fontawesome.com/f7b906a276.js" crossorigin="anonymous"></script>

然后像普通的 html 标签一样开始使用图标：

<i className="fas fa-tachometer-alt"></i>

或者你可以从 npm 安装 font awesome 包，我建议从 fontawesome 网站学习本教程：Font Awesome with react tutorial

【讨论】：

【解决方案2】：

您可以在 HTML 页面中添加您的 CDN 链接，然后像在普通 HTML 中使用它一样使用它，但请记住这里不允许使用 class 属性，您应该使用 className。

你应该有像<i className="fast fa-home"></i>这样的jsx代码

【讨论】：

【解决方案3】：

有多种方法。

在我看来，最简单的方法是添加字体很棒的 CDN 链接，在你的'index.html'

并像使用普通 HTML 一样使用 Font awesome

【讨论】：

这将允许我在字体 awsome 网站上使用相同代码的图标？
没错。像这样：
但使用 className 而不是 class 以避免警告
它显示为一个空矩形
您尝试使用哪个图标？