uniapp使用字体图标

简介: uniapp使用字体图标

1.在阿里图标库下载需要的字体图标,选择好图标后点下载代码

iconfont-阿里巴巴矢量图标库

2.将下载的压缩包里面的ttf文件拷贝到uniapp项目的static文件夹

3.如果是要用到app的标题栏右上角,代码如下。

"\ue671",可以在iconfont.json文件的unicode

{
            "path" : "pages/index/index",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "我的",
                "enablePullDownRefresh": true,
        "style": {
          "app-plus": {
            "titleNView": {
              "buttons": [{
                "text": "\ue671",
                "fontSrc": "static/iconfont.ttf",
                "fontSize": "22px"
              }]
            }
          }
        }
            }
        }


相关文章
|
3月前
|
前端开发 JavaScript
uniapp纯CSS实现圆形进度条组件
uniapp纯CSS实现圆形进度条组件
142 0
|
8月前
uniapp图片预览
uniapp图片预览
|
8月前
|
JavaScript API
uniapp自定义导航栏方法
uniapp自定义导航栏方法
674 0
|
小程序 前端开发 开发者
微信小程序-wxss样式
微信小程序-wxss样式
180 0
|
Web App开发 前端开发 小程序
在网页中使用 icon 字体图标 | 前端开发
在网页中使用 icon 字体图标 | 前端开发
|
小程序 安全
微信小程序离线引入 iconfont 字体图标
微信小程序离线引入 iconfont 字体图标
757 0
|
前端开发 小程序 C++
微信小程序开发实战(WXSS VS CSS)
微信小程序开发实战(WXSS VS CSS)
微信小程序开发实战(WXSS VS CSS)
|
小程序 前端开发 程序员
【小程序开发】uniapp引入iconfont图标及使用方式
【小程序开发】uniapp引入iconfont图标及使用方式
1062 0
【小程序开发】uniapp引入iconfont图标及使用方式
|
JavaScript
uniapp vue和Nvue使用外部字体iconfont
uniapp vue和Nvue使用外部字体iconfont
547 0
uniapp vue和Nvue使用外部字体iconfont
|
小程序 程序员 开发者
微信小程序开发:使用字体图标的方法
在微信小程序开发过程中,图标的使用是很常见很普遍的。一般情况下,在微信小程序项目的文件目录里面images里面,可以直接引用本地的图标文件,但是通过使用字体图标或者background设置背景图的时候,就不用引用本地图标文件,只能使用根据URL链接地址的字体或者图片,再或者使用base64把普通图标编码之后的格式。
875 0
微信小程序开发:使用字体图标的方法