前端开发会经常用到一些图标。当uimeizi提供的图标不能满足您的需求时，您可以在iconfont.cn上收集生成自己的业务图标库，然后使用。1.生成图标库代码首先，搜索找到你需要的图标，收藏到你的购物车中。在购物车中，可以将选中的图标添加到项目中（如果没有就新建一个），后续生成的资源/代码都是项目化的。进入刚才选择的项目页面，点击“生成代码”链接，下面会生成不同导入方式的代码，下面分别介绍。2.导入有三种导入方式供您选择：SVGSymbol、Unicode和Font类。我们建议使用SVG符号在现代浏览器中导入。SVGSymbol引入SVG符号是未来现代浏览器主流的图标引入方式。这是通过预加载符号，在适当的地方引入并渲染为矢量图形来完成的。它具有以下特点：支持多色图标，不再受限于单色图标通过一些技巧，支持字体大小、颜色调整样式支持IE9+及现代浏览器步骤如下：切换到SymbolTab，复制项目生成的地址代码：//at.alicdn.com/t/font_835630_0rudypqb4a.js添加图标样式代码，如果没有特殊要求，直接复用AntDesign图标style.icon{width:1em;高度：1em；填充：当前颜色；vertical-align:-.125em;}选择对应的icon并获取类名，应用到页面也可以使用AntDesign图标组件提供的Icon.createFromIconfontCN({...})方法来更方便的使用图标，如下：配置项目地址并创建一个图标组件import{Icon}from'antd';constIconFont=Icon.createFromIconfontCN({scriptUrl:'//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.js'});导出默认IconFont；之后使用起来和组件一样方便，支持配置样式Unicode这是最原始的方法，需要三步完成导入：复制项目生成的字体库代码，可以新建一个样式文件来放置图标相关的样式。@font-face{font-family:'iconfont';src:url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.eot');src:url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.eot?#iefix')格式('embedded-opentype'),url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.woff')格式（'woff'），url（'//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.ttf'）格式（'truetype'），url（'//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.svg#iconfont')format('svg');}添加图标样式代码，如果没有特殊要求，可以直接复用AntDesign图标样式。.iconfont{显示：内联块；字体样式：正常；垂直对齐：基线；文本对齐：居中；文本转换：无；行高：1；平滑：抗锯齿；-moz-osx-font-smoothing：灰度；&:before{显示：块；字体系列：“iconfont”！重要；/*注意工程中font-face*/}}中的匹配将鼠标移动到要使用的图标上，点击“复制代码”，就会得到该图标对应的字体代码，现在就可以导入了直接：FontClass切换到Fontclass选项卡，在页面头部导入下面生成的css代码：//at.alicdn.com/t/font_835630_0rudypqb4a.css如果你不喜欢标签的引入方式，也可以直接将上面链接中的代码复制到你文件中的样式中。如果不喜欢网站默认生成的类名，可以自己重写这部分代码，例如：-.icon-ali-pay:before{content:"\e66b";}//修改前-.monitor-icon-alipay:before{content:"\e66b";}//修改后可以选择复制icon对应的代码（也就是类名，如果类名改写了，记得这里用修改后的），直接用：但我们建议封装它：importReactfrom'react';constBizIcon=(props)=>{const{type}=props;return;};exportdefaultBizIcon;现在使用起来更方便了：Unicode和FontClass本质上都是字体，你可以通过一些字体样式属性来控制这种图标的显示。同时浏览器兼容性很好，但不支持多色图标。
