在React中使用FontAwesome字体

FontAwesome是一种图标字体。

安装依赖
1. 安装基础依赖
npm i --save @fortawesome/fontawesome
npm i --save @fortawesome/react-fontawesome
2. 安装样式依赖
npm i --save @fortawesome/fontawesome-free-solid
npm i --save @fortawesome/fontawesome-free-regular
npm i --save @fortawesome/fontawesome-free-brands
注意:
  • 免费版支持三种样式:solid、regular和brands,后面在使用图标时根据样式的不同也会有不同的前缀

使用方法

import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/fontawesome-free-solid'

 <FontAwesomeIcon icon={faCoffee} />

但是更好的做法应该是在入口的JS代码中一次性引入所需的图标,后面调用的时候就不需要每次都import了。

这里将引入的代码封装在FontAwesomeUtil.js中,那么入口处import这个文件即可。

import fontawesome from '@fortawesome/fontawesome'

import {
    faShare,
    faComment
} from '@fortawesome/fontawesome-free-solid'

fontawesome.library.add(
    faShare,
    faComment
)

后面使用中通过字符串的形式传入名字,不需要前缀。

<FontAwesomeIcon icon="share" />


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值