在小程序框架 wepy 中使用 iconfont 图标字体

新的小程序项目准备踩坑 Wepy 啦！

纠结过原生、Wepy、mpvue到底用哪一个。

• 原生：以前的项目用的就是原生，开发起来有点太原始，想换换口味。把原生做为托底方案，假如另外两个遇到踩不过去的坑就转用原生作。
• wepy：star数量有16k，看了看官方文档，感受开发方式还不错。毕竟算是腾讯亲生儿子，感受靠谱些。
• mpvue：star数跟 wepy 不相上下，也是 16k，一套代码多端通用颇有吸引力。

mpvue 跟 wepy 真的很难抉择，我目前没有兼容多平台的需求，因此直觉告诉我仍是用 wepy 吧~

100 多位经验丰富的开发者参与，在 Github 上得到了近 1000 个 star 的全栈全平台开源项目想了解或参与吗？
项目地址：https://github.com/cachecats/coderiver

为何用图标字体

一是轻量级、灵活性，二是小程序的特殊性。

目前小程序总体虽然能够达到 8M，但每一个分包不能超过2M，图标都用图片的话体积太大。

查找并下载图标

咱们采用阿里的 iconfont。

打开 iconfont ，搜索想要的图标，而后鼠标放到图标上点购物车小按钮加入购物车，以下图：

选完后找到购物车，点添加进项目。没有项目的话能够新建一个。

把图标放进项目的目的是，之后再想添加其余图标，直接加入项目便可，方便一键下载。

打开项目，能够看到刚选择的图标都在里面。点 下载至本地，将这些图标字体打包下载到本地。

下载完是一个 .zip 压缩包，解压获得一系列文件。

除了前两个，其余的几个文件都是以 iconfont 做为文件名，只是后缀不一样。猜测这应该是为了兼容不一样的浏览器而造成的不一样格式，打开 iconfont.css 瞅一眼，能够看到前面几行是引入了下面几个文件，还有注释，分别是兼容 IE9 、IE6-8 等各类版本的浏览器。

知道原理后，能够根据本身项目的状况选择引入哪些文件。最保险的是把以 iconfont 为文件名的几个文件都拷过去，确定没问题。但小程序的内核版本应该比较高，在微信内部打开不用考虑兼容性问题，因此咱们只用引 iconfont.css 这一个文件便可。

将 iconfont 引入wepy项目

打开 wepy 项目，将 iconfont.css 拷到项目中。我习惯放到 src/assets/iconfont 下面。

拷进来以后还要作一些更改。

因为我在项目中用了 SCSS，为了引入方便将文件名改成 iconfont.scss。虽然 SCSS 也能直接引入 CSS 文件，但我试了若是用 .css 做为后缀则引不成功，因此仍是改为 .scss 吧。

而后改 iconfont.scss 里的代码，把代码中引入其余文件的代码都删掉，只保留有 base64 的那行：

url('data:application/x-font-woff2;charset=utf-8;base64... 复制代码

而后还须要在 url 的前面加上 src:。改完后最终的代码：

@font-face {font-family: "iconfont";
  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAA...==') format('woff2');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-like:before {
  content: "\e614";
}

.icon-add:before {
  content: "\e612";
}
复制代码

上面 base64 中间删掉了不少用 … 代替了。

改完 iconfont.scss ，再在 app.wpy 中引入便可。

<style lang="scss">
  @import "./assets/iconfont/iconfont";

  .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
  }
</style>
复制代码

如今就能够愉快的在 wepy 项目中使用图标字体啦！

演示

新建一个页面，放一个 text 和 一个图标，编译后用微信开发工具打开看效果

<template lang="wxml">
  <div>
    <text>哈哈</text>
    <i class='iconfont icon-add'></i>
  </div>
</template>
复制代码

图标显示成功。

以上就是在 wepy 中使用 iconfont 图标字体的所有内容。

---

全栈全平台开源项目 CodeRiver

CodeRiver 是一个免费的项目协做平台，愿景是打通 IT 产业上下游，不管你是产品经理、设计师、程序员或是测试，仍是其余行业人员，只要有好的创意、想法，均可以来 CodeRiver 免费发布项目，召集志同道合的队友一块儿将梦想变为现实！

CodeRiver 自己仍是一个大型开源项目，致力于打造全栈全平台企业级精品开源项目。涵盖了 React、Vue、Angular、小程序、ReactNative、Android、Flutter、Java、Node 等几乎全部主流技术栈，主打代码质量。

目前已经有近 100 名优秀开发者参与，github 上的 star 数量将近 1000 个。每一个技术栈都有多位经验丰富的大佬坐镇，更有两位架构师指导项目架构。不管你想学什么语言处于什么技术水平，相信都能在这里学有所获。

经过 高质量源码 + 博客 + 视频，帮助每一位开发者快速成长。

项目地址：https://github.com/cachecats/coderiver

---

您的鼓励是咱们前行最大的动力，欢迎点赞，欢迎送小星星✨ ~