1. 前言

1.官网iconfont

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

2. 准备需要图标

1.iconfont 登录

2.选择自己的图标

3.加入购物车

4.添加到项目

以上步骤是常规的步骤,不按上边也无所谓的

5.查看项目

6.效果图

3. 本地使用iconfont

1.点击下载至本地

2.下载的内容

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

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

小技巧

0.准备

1.更改前缀

2.选择字体格式

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

1. 点击查看在线链接.

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

2.点击更新代码

3. 或者是点击生成

4.复制代码

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

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.预览效果

复制 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.鼠标放到自己需要使用的图标

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

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

7. 效果就不截图了

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

1.生成在线链接的步骤和上面的 Unicode在线版本一样

2.复制代码

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 效果就不截图了