在使用uni-app开发时,有时会用到字体图标,使页面更漂亮。这里主要使用的是阿里图标库。
1.下载并将字体图标放到项目中:
可以直接到阿里字体图标库中下载。
将解压好的文件中的六个文件放到项目中去。一般放到static文件夹下
2.修改iconfont.css文件:
不能直接使用,需要先配置一下。在iconfont前面加入~@/static/font/
3.全局使用字体图标:
如果想在整个项目中都可以使用字体图标,则需要在App.vue中导入
<style>
@import url('static/font/iconfont.css');
<style>
坑:必须在引入语句结尾加上分隔符;否则字体图标可能会不显示。
4.在app的导航栏使用字体图标:
可以去uni-app官网上看,在框架那部分有。
在page.json中可以进行配置,主要需要导入ttf结尾的iconfont文件
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"enablePullDownRefresh": true,
"app-plus": {
"titleNView": {
"buttons": [{
"type": "none",
"float": "right",
"text": "\ue615 退出",
"fontSize": "12px",
"fontSrc": "/static/font/iconfont.ttf",
"width": "60px"
}, {
"type": "none",
"float": "left",
"text": "检查更新",
"fontSize": "12px",
"width": "60px"
}],
"autoBackButton": false
}
}
}
5.使用彩色字体图标:
除了上述的icon font六个文件外,还要将iconfont.js文件也一同拿出来。
以上,就是uni-app中使用字体图标的一些方法。