如何在React中使用FontAwesome？

Question

我想在我的React项目中使用Fontawesome，我阅读了文档并通过yarn添加了Fontawesome：

$ 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;

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

- Masoud92m

---

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

Answer 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)

所有这些细节的位都在这里解释了。上面的例子来自那里。

- Gramatiik

---

你会如何使用它，以便传入一个数字 - 就像购物车图标，并将购物车中的物品数量叠加在图标上方？ - rom

Answer 2

可能是您拼写了 'fortawesome' 而不是 'fontawesome'。

- remoo

---

奇怪的是，这就是文档中指定的方式。https://fontawesome.com/how-to-use/on-the-web/using-with/react - isherwood

@isherwood 奇怪，我没有查看文档，只是浏览了他的代码。我想知道他们为什么这样做。 - remoo

据我所知，fortawesome曾经是他们的域名。也许在他们从Kickstarter获得巨额资金之前。 - engineerDave

Answer 3

你似乎缺少一些导入。

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

- isherwood

Answer 4

首先，您应该使用npm安装react包

npm i -g yarn

yarn add 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>
  );
},

如果您想要更完整的教程，可以通过在此处点击访问教程。

- Lucas