reactjs 项目使用 iconfont 小图标

Posted 2022-04-06 zhourongcode

在 reactjs 项目中是所有小图标目前主要分为两类使用方式，第一类通过 CSS 引入的方式使用，第二类使用 JS 的方式引入使用。

1. 注册-登录-建立项目-选中图标添加到购物车-添加至项目-下载到本地，当然亦能上传制作的自定义小图标。下面正式代码部分。

下载到本地解压后有如下几个文件：

其中第一种 CSS 引入使用的方案需要的文件如下图红线标记：

在如上图中找到 iconfont.css 打开后更改路径(一般如图中所示)在红线标记的位置:

修改完成后保存，一般会项目入口的 CSS 文件中引入这个 CSS 文件，依照自己的文件路径(例子里放在 static 目录下，注意末尾有分号)：

@import './static/iconfont/iconfont.css';

之后则在页面中直接书写：

<span class="iconfont">&#x33;</span>