在我们写网站的前端页面的时候，图标的出现频率会特别的高，图标的处理也比较的繁琐，下面我就讲讲我处理图标的过渡史
过渡一：作为一个切图仔，会头疼项目中的小的图标，一开始是一个个切出来，比如这样(两种状态，还得切两张图。。。)：
图标img
过渡二：然后，出了个优化方案，是把所有的图标都拼在一起，然后要用的时候，再一个个的从图片里截取，我就想问这样拼图标，然后再截图标，然后截出来的图标还不太好控制大小，我就想问你不累么 不累么！！！！
过渡三：最后发现阿里巴巴矢量图标库可以快速生成iconfont 用起来特别方便，再也不用我一个个扣小图标了，引用下图标字体文件就可以轻松搞定
1.进入阿里巴巴矢量图标库网站，将需要的图标添加至我的项目
2.打开我的项目，点击下载至本地
3.解压下载的文件
解压目录
4.打开html，就可以查看图标对应的引用class名称，以及对应的图标引用方式
，
5. 再根据html的引用方法引用图标，就可以轻松运用图标了
demo代码
小图标出现啦
在我们写网站的前端页面的时候，图标的出现频率会特别的高，图标的处理也比较的繁琐，下面我就讲讲我处理图标的过渡史 过...
1、demo 测试效果 2、在vue项目中引用 2.1 引入iconfont文件下面生成的 symbol 代码 i...
首先在iconfont官网中进行下载到本地 直接将下载本地的文件进行解压之后将iconfont.css文件，只要这...
步骤一：下载阿里图标文件到本地 步骤二：拷贝其中iconfont.css，iconfont.eot，iconfon...
一、下载图标到本地(http://iconfont.cn/) 二、文件解压 将iconfont.css重命名为ic...
准备工作 —— 本地生成 CSR 文件 在本地生成 CSR 文件的步骤：Dock 上点击 Launchpad ——...
引用本地 jar 文件
unicode引用 HTML 形式 拷贝项目下面生成的font-face ,并引入 定义使用iconfont的样式...
1、赋予访问本地文件权限 chrome://extensions/ 2、引用本地文件 3、匹配
使用到的库(当前版本)： 引用到文件： 生成图片文件方法 生成图片API 生成图片 //*************...
本文标题：快速生成iconfont本地引用文件
本文链接：https://www.haomeiwen.com/subject/jvmcyqtx.html
网友评论