uni-app中使用iconfont字体,亲测有用
一、下载好iconfont文件,复制iconfont.ttf这个文件至项目。
在你的项目中创建一个iconfont.css文件,文件内容:
@font-face {
font-family: 'iconfont'; /* project id 441284 */
src: url('//您的地址/iconfont.ttf') format('truetype');
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-shoucang:before{
content: '\e61d';
}
这里面必须注意  ;要转成:\e600,如果你要使用class的话
然后在App.vue文件中引入该css:
@import './common/iconfont1.css';
在具体页面使用:
1、<view class="iconfont">  ; </view>
2、<view class="iconfont icon-shoucang"></view>
第一种为推荐方法,第二种最后的文件必须在40K之内,不然无法使用,这个要注意。
二、iconfont文件里面包含 iconfont.ttf、iconfont.css, 将 iconfont.ttf文件转为 base64。
推荐转换工具地址:https://www.giftofspeed.com/base64-encoder/
然后打开 iconfont.css文件,修改 @font-face 部分,将转换好的 base64代码粘贴到对应位置,并且设置 代码如下:
@font-face {
font-family: "iconfont";
src: url(data:font/truetype;charset=utf-8;base64,转换的base64内容) format('truetype');
}
.iconfont {
display: inline-block;
}
最后则再项目中App.vue中引入iconfont.css文件
<style>
@import "./font/iconfont.css";
</style>
在任意组件中使用方法:
<view class="iconfont icon-XXX"></view>
经测试在H5及小程序中可以正常使用