1. 前言

1.官网iconfont
2.现在的项目iconfont的用的非常普遍,今天梳理下 react项目中的用法

---

2. 准备需要图标

1.iconfont 登录
2.选择自己的图标
3.加入购物车
4.添加到项目
以上步骤是常规的步骤,不按上边也无所谓的

---

5.查看项目

1.png

---

6.效果图 1.png

---

3. 本地使用iconfont

1.点击下载至本地
2.下载的内容

1.png
3.运行 这个demo_index.html文件
4.运行效果 1.png

5. 按照这个 三个步骤去使用就行 ,非常简单

---

小技巧

0.准备 1.png

---

1.更改前缀
2.选择字体格式

1.png

---

4. iconfont--Unicode--在线版本

1. 点击查看在线链接. 1.png

---

接下来根据的你的项目情况 会出现不同的界面

3.点击更新代码 1.png

---

3. 或者是点击生成 1.png

---

4.复制代码
不管上面的第三步是哪种情况,生成代码后操作都一样

`.png

---

5. react使用-inconfont-Unicode在线链接

这个根据自己的情况把复制的代码粘贴到css里面就行
这里我以 react为例
1.你可以放到单独的全局样式中
2.也可以放到index.css 或者App.css中

5.1 在线链接使用

这里以写到 App.css中为例

/* iconfont 使用 Unicode 生成在线链接 */
@font-face {
    font-family: 'iconfont';  /* Project id 1440303 */
    src: url('//at.alicdn.com/t/font_1440303_tx50qaqbpfr.woff2?t=1629792672700') format('woff2'),
         url('//at.alicdn.com/t/font_1440303_tx50qaqbpfr.woff?t=1629792672700') format('woff'),
         url('//at.alicdn.com/t/font_1440303_tx50qaqbpfr.ttf?t=1629792672700') format('truetype');
  }

---

5.2 图标样式

1.预览字体 2.png

---

2.预览效果 1.png

---

3. 复制 iconfont

  /* 可以自己改成自己想要的  比如yzsIconfont*/
.iconfont {
  font-family: "iconfont" !important;
    /*  样式都可以 修改  font-size: .20rem;  */
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

---

5.3 具体使用

1.复制想要的图标
2.鼠标放到自己需要使用的图标

1.png
3.点击复制就得到了需要图标的Unicode编码
4.一般用i或者span标签
5.class名字和之前自己写的样式保持一致(这里react使用className)
6.标签之间粘贴刚才复制的 Unicode编码

 <span className="iconfont ">&#xe624;</span>

7. 效果就不截图了

---

6. iconfont--Font class--在线版本

1.生成在线链接的步骤和上面的 Unicode在线版本一样
2.复制代码

1.png

---

7.react使用-iconfont--Font class--在线版本

1.把上述复制的代码粘贴到样式文件
这里以react的App.css为例

7.1 iconfont--Font class--在线链接使用

/* iconfont 使用 Font class 生成在线链接 */
@import "https://at.alicdn.com/t/font_1440303_tx50qaqbpfr.css";

---

7.2 复制需要的 图标 编码

步骤和之前的 Unicode一样

---

7.3 具体使用

<span className="iconfont icon-shangjia"></span>

---

7.4 效果就不截图了

---

参考资料

iconfont
react全局样式配置

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉