uni-app如何引入iconfont图标

注意看http://uniapp.dcloud.io/matter
>
字体图标：微信不支持本地字体图标。
替代方式1：不用图标改用图片，但失去了矢量和方便高亮变色的好处
替代方式2：字体文件放到服务器，从网络地址引用
替代方式3：将字体图标转换为base64格式字符串直接放到css里
特别注意：对于首页底部的原生tab，是在pages.json里配置，微信只支持图片不支持其他任何形式

第一步新建css文件保存的目录。
内容如下：
@font-face {
font-family: 'iconfont'; / project id 968065 /
src: url('//at.alicdn.com/t/font_968065_ac2ubmzftu.eot');
src: url('//at.alicdn.com/t/font_968065_ac2ubmzftu.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_968065_ac2ubmzftu.woff') format('woff'),
url('//at.alicdn.com/t/font_968065_ac2ubmzftu.ttf') format('truetype'),
url('//at.alicdn.com/t/font_968065_ac2ubmzftu.svg#iconfont') format('svg');
}

.iconfont {
font-family:"iconfont" !important;
font-size:40rpx;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-right: 14rpx;
}
.icon-search:before { content: "\e60b"; }

.icon-tubiaozhizuo-:before { content: "\e606"; }

.icon-tubiaozhizuo-1:before { content: "\e607"; }

说明:@fontyliu@hotmail.com 为阿里图库unicode线上地址直接引入

.iconfont 直接复制上面的就行

before 为阿里图库fnot class 地址中文件。（复制地址直接打开连接，滚动到底部会有项目全部图标的class 如：.icon-search:before { content: "\e60b"; }）

使用：
页面引入class文件。如@import "../../common/icon.css";

使用方式改变当前class 如con-search
<uni-icon type="" class="iconfont icon-search"></uni-icon>
//微信能用
//这个评论添加图片好像很麻烦。。。qq的载图直接能粘贴就好了

小程序本地引入阿里 iconfont.解决方案

• 把iconfont.css 的全部代码 全部复制到App.vue文件style里，或者（在static目录下创建一个css文件，在main.js引入即可 import "./static/icon-font/iconfont.css"）
• 然后 删除 src: url('iconfont.eot?t=1562306471309'); / IE9 /
• url('iconfont.woff?t=1562306471309') format('woff'),
• url('iconfont.ttf?t=1562306471309') format('truetype'), / chrome, firefox, opera, Safari, Android, iOS 4.2+ /
• url('iconfont.svg?t=1562306471309#iconfont') format('svg'); / iOS 4.1- /
• 只保留转为base64的 woff2的即可，像下面这样
• 在其它页面使用方式 ，两种方式

<span class="iconfont icon-stared"></span>  
<span class="iconfont"></span>

<style>  
@font-face {font-family: "iconfont";  
  src: url('data:application/x-font-woff2  
charset=utf-8;base64,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') format('woff2');  

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

.icon-qrcard:before {  
  content: "\e748";  
}  

.icon-stared:before {  
  content: "\e61e";  
}  

.icon-shopcar:before {  
  content: "\e65c";  
}  

.icon-xia:before {  
  content: "\e60c";  
}  

.icon-scan:before {  
  content: "\e60b";  
}  

.icon-close:before {  
  content: "\e606";  
}  

.icon-star:before {  
  content: "\e640";  
}  

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

.icon-zuo:before {  
  content: "\e61f";  
}  

.icon-shang:before {  
  content: "\e71e";  
}  
</style>  

微信小程序不支持本地字体，如果需要小程序的话， 只能使用网络路径资源。
如果不考虑小程序的话，静态资源需要放在特定的目录下。详细见文档：目录结构

如果依旧有问题或疑问，建议上传一个可以重现问题的 demo。

用iconfont的远程图标就行了

目前貌似只能转换成base64字符串才能原生APP和微信小程序共用呢

使用远程图标，在app中网速慢的情况下会出现图标出现延迟

如果后期更换的话需要怎样更换啊，求帮忙