官网介绍:uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。
这个框架使用的人群并不是很广,碰到的各种坑基本都需要自己去解决,因此,入坑需谨慎!
如何在uni-app中引入阿里的矢量图?
- 上iconfont官网找到你需要用到的图标,添加至你的项目
- 复制你的在线链接代码,建议使用这种方法,最便捷的一种方法,亲测!
- 将这段代码拷贝至uni-app的app.vue文件下的style标签里面,因为uni-app项目中,app.vue下的style为公共样式,当然你也可以创建一个样式文件,将代码拷贝至你自定义的样式文件,最后还是要引入到app.vue的style标签下。"font-family"可以自定义为你想要的名字,我这里定义为'w-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"></text>
- 效果如下:
如果想增加新的图标项目怎么办?
- 上官网找到新加的图标,同样添加到
原来的项目
里面; - 重复上面步骤,只需要点一下复制,然后打开app.vue,替换你刚复制的这部分代码即可:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。