如何在 React 中使用 Font Awesome Icon？

Posted 2023-02-21

【中文标题】如何在 React 中使用 Font Awesome Icon？

【英文标题】：How do I use Font awesome Icon in React?

【发布时间】：2021-12-02 04:09:14

【问题描述】：

我想在 ReactJs 中使用 fontAwesome 图标。我以前没有这样做过。我想在 React 中做一些类似 home 图标和 Signout 图标的事情。

这是我到目前为止所做的。

我包含了字体 awesome Lib

import  FontAwesomeIcon  from '@fortawesome/react-fontawesome'

现在我想在应用程序中这样使用

                        <td >
                        <p align="center"/>
                        <button className="btn"><i className='icon-home'></i></button>
                        </td>
                        <td >
                            <p align="center"/>
                        <button className="btnSignout"><i className='fa fa-home'></i></button>
                        </td>

如何在 React 应用程序中使用 FontAwesome？

【问题讨论】：

你读过the docs吗？他们说得很清楚。

【参考方案1】：

要在 react 项目中使用 Font Awesome，你应该 -

安装以下软件包（在终端中运行以下命令）

npm i --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons npm install --save @fortawesome/react-fontawesome

现在是时候调用并使用 javascript 文件了。

将以下 2 行导入文件中。

import FontAwesomeIcon from "@fortawesome/react-fontawesome"; import faMugHot from '@fortawesome/free-solid-svg-icons';

图标的使用格式如下，

<FontAwesomeIcon icon=faIconName, faAnotherIconName />

例如：`

Note: 图标名称将是驼峰式fa<IconName>。例如，在 font-awesome 网站中，字体名称是fa-anchor，我们可以写成faAnchor。对于图标的长名称，如果名称是fa-mug-hot，我们必须将其写为faMugHot。

【参考方案2】：

要在您的 React 项目中轻松使用 font awesome 图标，请使用 react-icon 库，它不仅提供对 font awesome 的支持，还提供 Bootstrap 图标、Heroicons 等。

第 1 步。 npm install react-icons --save

第 2 步。 导入这样的图标 -

import  FaBeer  from 'react-icons/fa';

注意

：FaBeer 是这里的图标名称，更多图标请访问react-icons

第 3 步。 像这样使用它 -

class Question extends React.Component 
  render() 
    return <h3> Lets go for a <FaBeer />? </h3>
  

【讨论】：

这是一个不同的库。 React-Icons 是比 React-FontAwesome 更全面的图标源，仅提供 FA 图标，语法不同。

@isherwood 虽然它很全面但更易于实施。

我同意——这就是我使用的。但这个问题清楚地引用了另一个问题。大多数情况下，我想向任何可能尝试将您的语法与其他库一起使用的人指出这一点。那是行不通的。我建议在你的回答中明确说明。

如何在 Button 中使用这个？

例如按钮中的搜索图标导入类似这样的东西 - 从“react-icons/fa”导入 FaSearchengin 并使用它像这样 submit

【参考方案3】：

你可以这样做，检查下面的代码或点击这里demo

请仔细检查我使用的库并安装

import React,  Component  from 'react';
import  render  from 'react-dom';
import  FontAwesomeIcon  from '@fortawesome/react-fontawesome';
import  faCoffee, faBars  from '@fortawesome/free-solid-svg-icons';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component 
  constructor() 
    super();
  

  render() 
    return (
      <div>
        <p>Please check this</p>

        <button className="btn btn-primary">
          <FontAwesomeIcon icon=faBars size='1x' />
          <span style= marginLeft: '10px' > My Button</span>
        </button>

        <br />
        <br />
        <FontAwesomeIcon icon=faCoffee size='2x' />
      </div>
    );
  


render(<App />, document.getElementById('root'));

【讨论】：

嗯，我问的是如何在Button中实现。

很抱歉造成混淆，请再次检查我也更新了代码和演示链接。

@Blaq，里面的元素或组件无关紧要。它的工作原理相同。此外，说“嗯”会让人觉得讽刺和不专业。也许这是一种文化差异。

@***，您的解决方案有效。谢谢你