uniapp的iconfont引入以及注意事项，微信小程序端问题解决

这里说说uni-app怎么引入iconfont，以及在uni-app里需要注意什么（我们一步步来，微信问题在最后面）

1）阿里巴巴矢量图标库创建项目，官网地址
这个大多数前端基本都会，我就不赘述了，不会的上网查查怎么使用

2）添加好你的图标，进到你的项目里

点击“下载至本地”，解压后获得其中两个文件iconfont.css和iconfont.ttf

3）在项目里创建两个文件夹common，static

把iconfont.css放到common文件夹下，把iconfont.ttf放到static文件夹下
（这时候有用图标功能的人可能会有疑问，为什么不把两个文件都放static里，原因是：static文件夹放置的文件，在手机移动端可能会被认为是静态文件，而不进行编译（如less，sass，css），所以需要另外建一个common文件放置iconfont.css）

4）(全局引入iconfont)，打开App.vue

在App.vue的style标签里引入你iconfont.css(我这里使用的样式预编译是less)

<style lang="less">
	/* 引入iconfont，下面写iconfont.css的存放路径 */
	@import "common/iconfont.css";
</style>

5）(在iconfont.css里引入iconfont.ttf)
打开iconfont.css，修改@font-face为下面内容

@font-face {
  font-family: "iconfont";
  //下面写iconfont.ttf的存放路径
  src: url('~@/static/iconfont.ttf'); 
}

6）（使用iconfont功能）这时候你就能在页面使用图标了
有两种方式，都需要class="icon iconfont"来引入，如下图两个箭头

<template>
	<view class="container">
		<view class="icon iconfont">第一个箭头&#xe62d;</view>
		<view >----------------------------------------------</view>
		<view class="icon iconfont icon-fanhui">第二个箭头</view>
	</view>
</template>

效果

第一个箭头是第一种方式，是引用代码，需要在图标库项目里复制引用代码，如下图

把鼠标移到图标上方，可以看到复制代码

第二种是点开右上角的铅笔头

然后复制font class里的内容，class变成icon iconfont icon-你复制的内容

<template>
	<view class="container">
		<view class="icon iconfont icon-fanhui">第二个箭头</view>
	</view>
</template>

7）微信小程序问题：
打开微信小程序来调试页面，你会发现图标报错或者消失，找了一下原因，原来是iconfont.ttf不支持线下引入，所以要引入线上ttf

我们回到图标库，先“点击生成代码”，然后“点此复制代码”

然后回到iconfont.css，覆盖原先的@font-face，并且在每个url前加上https:

问题解决，所以ttf文件就不用再引入了
但以后每次更新图标库都需要手动生成一下新的线上代码，然后覆盖