早几年给甲方做程序的时候 有图标的时候 大部分都是设计出icon的图片 然后图片上传到图床里 给程序这边提供一个外链来用 当时一般是让设计把图标图形做到一个1:1的正方形jpg里 使用起来后发现1:1的图形里 要让icon图形绝对对齐 绝对居中 非常麻烦 每次使用到程序里 大概率都要返回让设计改 为了统一整个程序里的图标 经常开发和设计两边都要花费好多精力
之后尝试了阿里的iconfont 瞬间效率翻倍 之前换字体的文章有提到过
今天记录下icon的引入 直接上步骤
1.进官网
没账号的还是需要注册登录下
2.我们用的是官方图标库 统一性比较好 而且几乎所有含义的icon都有 选择起来比较方便 有好几个图标库 可以按照喜好来选择 在此要感谢下所有图标库的各位设计大神们 因为他们的付出 才有了这些优秀海量的图标可以使用
3.选中图标库之后 鼠标移到icon文件上 点第一个购物车图标
4.添加入库之后 右边购物车图标里会有新增提醒
5.购物车图标点击后可以看到自己添加的图标
6.如果有不喜欢或者不需要的 提前删除一下就ok 鼠标移动到购物车里的图标文件上 会出现删除图标
7.确定好了之后 在最下方的 加入项目中 选择自己的项目文件夹加入这些图标 如果没有项目 右边的新建文件夹按钮新增一下项目文件夹就ok
8.添加成功之后 会直接跳转到这个项目文件夹里 点击 生成代码
9.等待一下 把新生成出来的代码全部复制
10.回到微信小程序里 在app.wxss文件的最顶部 引入一下
11.随便拿一个图标做案例 红框里的图标Unicode需要在wxss里用
12.在需要使用图标的模块里 比如index模块 index.wxss文件中 加入如下代码 icon-ship可以自定义 写自己喜欢的就ok content里就填入图标的Unicode 需要对应一下别填错了
.icon-ship::before { content: '\e82f'; font-size: 24pt}
13.在index.wxml文件中 加入图标引入代码
<icon class="iconfont icon-ship"></icon>
14.填入的iconfont需要和第10步骤里app.wxss文件的font-family对应好 class里的icon-ship需要和wxss里的声明对应 否则图标会载入失败 图标载入就完成了 如果需要控制图标大小 在.wxss的样式里改变一下font-size就可以了
ok 以上就是简单的iconfont引入 记得如果是商用的话 需要注意一下图标可以使用的范围 不能侵权使用图标哈~
感觉第三方组件引入iconfont更简单快捷一些 之后空闲了也提一嘴
保持好奇 不断进步 下期见~
微信扫一扫,分享到朋友圈
