小程序入坑（一）---如何引入iconfont 字体图标

最近一直忙于平常任务，实际上是懒癌又犯了。。。。。。。。。。不过由于本身的“懒癌”，“不思进取”给本身挖了很多坑。

一，小程序工具的安装

 打开简易小程序的官网https://mp.weixin.qq.com/debug/wxadoc/dev/,，点击 导航栏里的“工具“-》点击“微信开发者工具”，如图：

进入下载开发工具页面，而后根据本身的电脑配置选择相应的压缩包。

2、建立一个本身的项目

一、安装好“微信开发工具”==》双击打开，扫码进入==》调试类型选择“本地小程序项目”==》点击“添加项目”==》点击“无APPID”（博主是本身练手开发的，没有APPID），填写“项目名称”，选择“项目的保存路径”。

二、微信有一套适用于本身的ui组件，效果网站：https://weui.io/文档说明网站：https://github.com/Tencent/weui/wiki(费了老大的劲才找到，就不能写在一块儿吗？)。你们能够下载下来用，不过值得注意的是，也是我第一次入坑的地方，demo是HTML的标签，而小程序支持的标签倒是“view，image，text,icon”等这些。是否是瞬间有点心痛的感受。。。

你们能够点击“组件”，看看小程序支持哪些标签。

3、引入多色字体图标

一、搜索“http://www.iconfont.cn”，点击“帮助"==>"代码应用"==>“web端使用”。

　　你们能够看到3种引入教程：“unicode”，“font-class”，“symbol”，三种引用，这里又有一个深坑等着你们。前两种形式的应用只能使字体显示单一颜色，如图：

 

而最后一种却可使小图标使用多色，如图：。

　　若是你们要作一个带图片的导航切换，而且选中时的图片是彩色的，用“symbol”这种方式是否是很很方便，不用切图，不用使用css spring 一点一点的调位置，只须要引入字体图标就行。理想是否是很美好。现实倒是，使用“symbol”这种方式是使用"svg"的方式。如：

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

而程序不支持“svg”的渲染。。。。忍痛割爱啊，只能使用老方法啦。。。。。。。。。

二，引入单色字体图标

　　既然小程序不支持“多色”字体图标的引入，支持普通的字体图标也是好的。按照官方文档的第二种方式（原谅我不喜欢第一种方式），

写上本身须要的小图标的类名，如：

<i class="iconfont icon-error"></i>

页面上应该显示这样的图标啊，然而没有。。。。

不得已只能本身在样式文件里写上：

.icon-error{
   content: "\e6b2";
   font-size:30px;
}

3、如何获得字体图标的Unicode(16进制)

一、将鼠标浮到要使用的图标上，出现如图：

二、点击“铅笔”式的按钮，进入编辑页面，如图：

红色箭头指向部分，就是该图标的16进制，固然你也能够在这里编辑这个图标的样式。