iconfont在react中完整使用教程

56次阅读

共计 549 个字符,预计需要花费 2 分钟才能阅读完成。

hello, 各位小伙伴们,很久没写文章了。
突然要自己搭建项目了,项目中对于阿里巴巴 iconfont 的使用,大家都清楚吗?

第一步:将图标加入购物车

第二步:将图标下载到本地, 将如下文件放置在 react 项目中 assets 目录下

第三步:导入 iconfont.css 到项目目录,鄙人踩坑点在此。
查阅部分文件,找到相关资料,发现是在纯 html 页面中导入是完全 OK 的。
<link rel=”stylesheet” type=”text/css” href=”iconfont.css”>
但是请注意,咱们将静态资源放置在 src 目录下,public 中的 index.html 不可采用。
于是,正确做法如下:
在 src 文件下的 index.js 或者 app.js 等文件中写入如下语句即可。
import ‘./assets/fonts/iconfont.css’;

第四步:介绍使用方法

unicode: <i className="iconfont">&#xe72e;</i>
font-class:<i class="iconfont icon-gouwuche"></i>
symbol: 待我研究去吧。。。

备注:
如果发现页面没有更新,可以重启一下服务。
以上就是关于 iconfont 的介绍了,大家可以踊跃查阅资料,在此希望能够给到小伙伴们一些帮助呀!

正文完
 0