如何在反应中使用 fontawesome？答案

【问题标题】：How to use fontawesome in react?如何在反应中使用 fontawesome？
【发布时间】：2019-06-12 22:21:57
【问题描述】：

我想在我的 react 项目中使用 fontawesome，我阅读了 document 并添加了 fontawesome 和 yarn：

$ yarn add @fortawesome/fontawesome-svg-core
$ yarn add @fortawesome/free-solid-svg-icons
$ yarn add @fortawesome/react-fontawesome

并创建一个如下所示的组件：

import React, { Component } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

class Todo extends Component {
    render() {
        return (
            <div>
                font: <FontAwesomeIcon icon="coffee" />

            </div>
        );
    }
}

export default Todo;

但不显示图标，如何解决？

【问题讨论】：

你也可以看看这个库。 react-icons.netlify.com/#

标签： javascript reactjs font-awesome

【解决方案1】：

如果您想通过名称引用图标，您必须声明一个库：

import ReactDOM from 'react-dom'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'

library.add(fab, faCheckSquare, faCoffee)

然后像这样使用它：

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export const Beverage = () => (
  <div>
    <FontAwesomeIcon icon="check-square" />
    Favorite beverage: <FontAwesomeIcon icon="coffee" />
  </div>
)

否则，您可以使用显式导入：

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

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(element, document.body)

所有这些细节都是explained here。以上示例均来自那里。

【讨论】：

您将如何使用它来传递一个数字 - 就像在购物车图标中一样，并将购物车中的商品数量覆盖在图标顶部？

【解决方案2】：

您似乎缺少一些导入。

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

library.add(faIgloo)

https://fontawesome.com/how-to-use/on-the-web/using-with/react

【讨论】：

【解决方案3】：

可能是您拼写的是“fortawesome”而不是“fontawesome”

【讨论】：

奇怪的是，这就是文档中指定的方式。 fontawesome.com/how-to-use/on-the-web/using-with/react
@isherwood Weird，我没有查看文档，只是浏览了他的代码。我想知道他们为什么这样做
IIRC fortawesome 曾经是他们的域名。也许在他们从 kickstarter 获得大笔资金之前

【解决方案4】：

首先你应该使用 npm 来安装 react 包

npm i -g 纱线

纱线添加 react-native-fontawesome

在此之后，您必须导入数据才能开始在您的项目中使用

import FontAwesome, { Icons } from 'react-native-fontawesome';
 
...
render() {
  return (
    <View>
      <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>
        <FontAwesome>{Icons.chevronLeft}</FontAwesome>
        Text
      </Text>
    </View>
  );
},

如果您想要更完整的教程，您可以访问教程clicking here

【讨论】：