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"
              }]
            }
          }
        }
            }
        }


相关文章
|
5月前
Simditor富文本编辑器
Simditor富文本编辑器
82 2
|
缓存 小程序
微信小程序使用vant组件样式不生效的问题
微信小程序使用vant组件样式不生效的问题
865 0
|
5月前
|
JavaScript 前端开发 数据可视化
富文本编辑器使用详细介绍
富文本编辑器使用详细介绍
|
5月前
uniapp图片预览
uniapp图片预览
|
11月前
CSS3实现鼠标悬停动态效果(仿阿里云官方网站)
CSS3实现鼠标悬停动态效果(仿阿里云官方网站)
35 0
|
12月前
|
小程序 前端开发 开发者
微信小程序-wxss样式
微信小程序-wxss样式
160 0
|
开发框架 移动开发 前端开发
UniApp响应式布局
UniApp 是一款基于 Vue.js 开发的跨平台应用开发框架,可以同时构建 iOS、Android、H5 等多个平台的应用。在 UniApp 中,单位(Unit)是一个非常重要的概念,它决定了应用在不同设备上的布局和样式,要适应不同设备尺寸和屏幕方向的布局是一项艰巨的任务。UniApp 提供了多种方式来实现响应式布局。通过使用 Flex 布局、媒体查询、自适应单位和条件渲染,我们可以根据不同的屏幕尺寸和方向创建出适应性强的布局,从而提供更好的用户体验。
463 1
|
Web App开发 前端开发 小程序
在网页中使用 icon 字体图标 | 前端开发
在网页中使用 icon 字体图标 | 前端开发
|
小程序 安全
微信小程序离线引入 iconfont 字体图标
微信小程序离线引入 iconfont 字体图标
638 0
|
前端开发 小程序 C++
微信小程序开发实战(WXSS VS CSS)
微信小程序开发实战(WXSS VS CSS)
微信小程序开发实战(WXSS VS CSS)