react使用FontAwesome字图标库

如图,项目要求实现的效果是这样的:

然后我做出来的效果是这样的:

很明显三角形图标不一致,因为antDesign的图标只有这个:

在找字图标的途中看到FontAwesome有这种字图标,决定拿来用,于是照着文档来引用:

https://github.com/FortAwesome/react-fontawesome

首先把Webstore切到Terminal,输入命令安装:

npm i --save @fortawesome/pro-solid-svg-icons@prerelease
npm i --save @fortawesome/pro-regular-svg-icons@prerelease
npm i --save @fortawesome/pro-light-svg-icons@prerelease

文档上这么写的:

我也照着写:

import FontAwesomeIcon from '@fortawesome/react-fontawesome'急   件

其中className是less样式名的写法,这应该是没有问题的,但是效果却:

我的图标呢!我的图标呢!检查了图标名字没有错,但是它就是不出来,后面换了种写法:

import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import faExclamationTriangle from '@fortawesome/fontawesome-free-solid/faExclamationTriangle'急   件

这次总算实现了效果:

icon的名字是fa+原图标名字(首字母大写)

ps:前一种写法为什么不出来知道原因的请告诉我。。。


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部