首先感谢iconfont的支持

第一次在uni-app中只引入iconfont.css文件，发现页面显示的是乱码,刚刚发现是uni-app更新之后不支持的原因。

1、在iconfont搜索自己需要icon，点击'添加入库'

image.png

2、点击右上角购物车按钮，点击'添加至项目'按钮，取个项目名字，确认就行了。

image.png

3、点击'确定'按钮之后，在本页面点击'我的项目'标签，这里要选的是'Unicode',另外两种方法点击右侧'使用帮助'按钮查看。

image.png

4、uni-app中使用方法

iconfont.css页面

@font-face {font-family: "iconfont";
  src: url('https://iconfont.eot?t=1597544970403'); /* IE9 */
  src: url('https://iconfont.eot?t=1597544970403#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
  url('https://iconfont.woff?t=1597544970403') format('woff'),
  url('https://iconfont.ttf?t=1597544970403') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('https://iconfont.svg?t=1597544970403#iconfont') format('svg'); /* iOS 4.1- */
}

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

.icon-xiajiantou:before {
  content: "\e6cc";
}

.icon-sousuo:before {
  content: "\e617";
}

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

.icon-lajitong:before {
  content: "\e716";
}

.icon-shangjiantou:before {
  content: "\e71e";
}

.icon-gouwuchezhengpin:before {
  content: "\e610";
}

App.vue页面

<style>
    /*每个页面公共css */
    @import "./common/iconfont.css";
    @import "./common/uni.css";
</style>

index.vue页面

<template>
    <view class="index">
        <view class="iconfont icon-dkw_xiaoxi">消息</view>
    </view>
</template>

说明

1、 uni.css需要自己这样创建一个demo，然后将uni.css页面复制到需要的项目

image.png

2、由于uni-app版本的问题，iconfont.css文件只用base64无法显示icon，其他几个地址前面加上'https://'才能正常显示icon
3、icon选的'Unicode'下载到本地，然后把iconfont.css移动到项目中
4、做搜索栏的时候发现uni-app的'fontSrc'属性不支持网络地址，必须使用本地地址，需要使用iconfont.ttf文件