本文主要是介绍react使用FontAwesome字图标库,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
如图,项目要求实现的效果是这样的:
然后我做出来的效果是这样的:
很明显三角形图标不一致,因为antDesign的<Icon>图标只有这个:
在找字图标的途中看到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'<div className={style.warning}><FontAwesomeIcon icon="exclamationTriangle" className={style.icon}/><span>急 件</span></div>
其中className是less样式名的写法,这应该是没有问题的,但是效果却:
我的图标呢!我的图标呢!检查了图标名字没有错,但是它就是不出来,后面换了种写法:
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import faExclamationTriangle from '@fortawesome/fontawesome-free-solid/faExclamationTriangle'<div className={style.warning}><FontAwesomeIcon icon={faExclamationTriangle} className={style.icon}/><span>急 件</span></div>
这次总算实现了效果:
icon的名字是fa+原图标名字(首字母大写)
ps:前一种写法为什么不出来知道原因的请告诉我。。。
这篇关于react使用FontAwesome字图标库的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!