uni-app 引入自定义矢量图标(iconfont)

外包达人
• 阅读 10305
官网介绍:uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。

这个框架使用的人群并不是很广,碰到的各种坑基本都需要自己去解决,因此,入坑需谨慎!

如何在uni-app中引入阿里的矢量图?

  • 上iconfont官网找到你需要用到的图标,添加至你的项目
  • 复制你的在线链接代码,建议使用这种方法,最便捷的一种方法,亲测!

uni-app 引入自定义矢量图标(iconfont)

  • 将这段代码拷贝至uni-app的app.vue文件下的style标签里面,因为uni-app项目中,app.vue下的style为公共样式,当然你也可以创建一个样式文件,将代码拷贝至你自定义的样式文件,最后还是要引入到app.vue的style标签下。"font-family"可以自定义为你想要的名字,我这里定义为'w-iconfont'

uni-app 引入自定义矢量图标(iconfont)

  • 自定义图标的大小、颜色等样式:
.w-iconfont {
  font-family:"w-iconfont" !important;
  font-size:16px;
  color: orange;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
  • 复制你要使用的图标的代码,在项目中使用它:

<text class="w-iconfont">&#xe668;</text>

uni-app 引入自定义矢量图标(iconfont)

  • 效果如下:

uni-app 引入自定义矢量图标(iconfont)

如果想增加新的图标项目怎么办?

  • 上官网找到新加的图标,同样添加到原来的项目里面;
  • 重复上面步骤,只需要点一下复制,然后打开app.vue,替换你刚复制的这部分代码即可:

uni-app 引入自定义矢量图标(iconfont)

点赞
收藏
评论区
推荐文章
CuterCorley CuterCorley
4年前
uni-app入门教程(1)uni-app简介、部署和目录结构
@toc前言本文主要介绍了uniapp的基本情况,并引导快速创建和运行第一个uniapp项目,同时对项目的目录结构和代码规范进行详细说明,适合uniapp零基础初学者。一、uniapp介绍uniapp是DCloud官方推出的重要产品,是一个使用Vue.js开发跨平台应用的前端框架,官网是。开发者通过编写一套Vue.js代码,即可
CuterCorley CuterCorley
4年前
uni-app开发 常见异常和解决办法
前言uniapp是一个基于Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。在开发过程中可能会遇到一些异常,这些异常及其解决办法总结如下。1.调用微信开发者工具报错IDEserviceportdis
CuterCorley CuterCorley
4年前
uni-app开发 经验和技巧总结
前言uniapp是一个基于Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。在开发过程中可能会用到一些经验和技巧,可以加速开发,归纳如下。1.自定义组件模板在开发时,很多情况下需要自定义组件,在自
APICloud平台常用技术点汇总详解
APICloud移动低代码开发平台介绍:使用APICloud可以开发移动APP、小程序、html5网页应用。如果要实现编写一套代码编译为多端应用(移动APP、小程序、html5),需使用avm.js框架进行开发。如果只开发APP,则可以使用前端技术(HTML5、Vue、react等)、avm.js进行开发,还可以使用模块商店大量的原生
融云IM即时通讯 融云IM即时通讯
5个月前
融云IM干货丨UNI-app适合个人开发者使用吗?
UNIapp非常适合个人开发者使用,原因如下:跨平台高效开发:UNIapp基于Vue.js,支持一次编写代码,多端发布,包括iOS、Android、H5及各大小程序平台,显著降低开发成本。组件丰富:提供大量内置组件和API,加速开发进程,同时支持自定义组件
美凌格栋栋酱 美凌格栋栋酱
4个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
融云IM即时通讯 融云IM即时通讯
5个月前
融云IM干货丨uni-app是什么
uniapp是一个使用Vue.js开发跨平台应用的前端框架。开发者可以通过编写一套代码,将应用发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。uniapp的主要特点
融云IM即时通讯 融云IM即时通讯
5个月前
融云IM干货丨uni-app 是否适合大型商业应用开发?
uniapp适合大型商业应用开发,并且已经有许多成功的案例。以下是一些支持这一观点的理由:跨平台兼容性:uniapp能够实现“一套代码,多端运行”,支持iOS、Android、H5以及各种小程序平台,这大幅削减了开发成本并加速了产品迭代。性能和体验:uni
融云IM即时通讯 融云IM即时通讯
5个月前
融云IM干货丨如何评估uni-app的前景
根据搜索结果,UNIapp作为一款基于Vue.js的跨平台应用开发框架,自2018年发布以来,其发展前景被普遍看好。以下是几个关键点来评估UNIapp的前景:跨平台能力:UNIapp支持开发者使用一套代码同时编译出iOS、Android、H5、小程序等多个
外包达人
外包达人
Lv1
落日熔金,暮云合璧,人在何处
文章
7
粉丝
0
获赞
0