uni-app（一）----引入阿里云矢量图标库

这段时间因为老师要求，要做一个小程序，所以开始学一下uni-app开发，以后我会把我学的东西都发出来。现在写一下关于引入阿里云矢量图标库的方法

添加图标

首先去官网选择你喜欢的图标

你可以在这搜索你想要的图标，选择好之后便把他添加到红色小车里

然后选择添加至项目（没有的可以自己建一个）

添加图标

进去我的项目之后，将下面的链接在浏览器打开。

在Hbuilder中你创建的项目里新建一个common目录，然后在里面新建一个iconfont.css文件，将刚刚在浏览器打开的样式复制进去：

接下来就在App.vue中引入：

然后在布局中使用：

<icon class="iconfont icon-shouye"></icon>

上面的“icon-shouye”是图标的名字

这样结果就出来啦：

最后说一下，学了几天，感觉uni-app有点坑，可能是因为小众，所以有啥问题网上很少有解决方法，就比如这个引入图标的，我出了一个问题，网上找了好久都没找到，最后还是看视频找到了错误。
在引入图标还有一个坑就是，之前我是把图标下载到本地的，然而小程序不能使用本地图标，所以只能是直接引用在线连接了。

下面是我刚发表的如何引入css动画库的文章，有兴趣的小伙伴可以去看看哟
动画

uni-app（一）----引入阿里云矢量图标库相关推荐

uniapp如何引入阿里云矢量图标库
最近搞了下uniapp的开发,写一下关于引入阿里云矢量图标库的方法: 首先说下我走过的坑吧,我直接把图标zip包下下来放在static里面,在App.vue的style中引入,保存,后面查了下,微信小 ...
引用阿里云矢量图标库
1.登陆http://www.iconfont.cn/ 例如我需要购物车的图标 2.按下回车后会出现一堆的购物车图标 3.喜欢那个一个就鼠标移动到图标上去,加入购物车 4点击加入购物车后,就会出现在 ...
矢量图标库如何引入html,阿里巴巴矢量图标库 iconfont 的使用方法
做设计的应该会知道"阿里巴巴矢量图标库"这个网站,你可以上传自己设计的图标,也可以下载别人分享的图标. 作为前端,我们也可以更好的利用它,实现网站图标的美化. 首先找到你需要的图标 ...
矢量图标库如何引入html,Iconfont矢量图标库在网站中的使用方法
原标题:Iconfont矢量图标库在网站中的使用方法大家都知道现在移动端网站设计比较热门,由于移动端的网站页面的收缩性要求很高,必然在网页设计中,一些小点的图标,使用图片收缩性,以及美观上并不是很理 ...
阿里云矢量图标的使用
阿里图标官网:https://www.iconfont.cn/ 创建"我的项目",获取css链接: 两种使用方法: 一.本地引用 1.引入iconfont 的css <lin ...
react-next 引入阿里云iconfont 图标（适用所有）
进入阿里云图标库搜索想要的图标地址: https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 随便找一个加入购物车添 ...
html引用阿里云矢量图标（不照搬官方，手把手教学）
如何使用图标呢? 如果不想看前面介绍的话,直接最后一个标题即可点我快捷跳转 1. 介绍使用的时候,官方提供的使用方法总共三种. 第一种是:Unicode 第二种是:Font class 第三种是: ...
阿里巴巴矢量图标库项目中使用svg格式字体图标使用方式及封装
一.首先登陆阿里云矢量图标库,把需要的字体图标加入到自己的项目中二.阿里云图标的四种方式(推荐第三种方式引入,如果不考虑网络问题可以用在线引入的方式) 进入项目以后会看到阿里云可以选择三种方式进行导 ...
阿里妈妈矢量图标使用
1.登陆 http://www.iconfont.cn/ 阿里妈妈矢量图标库 2.登陆,可以使用GitHub账号或者其他账号登陆 3.选择将要使用的主题图标,或者在搜索栏里面搜索需要的图标 4.将需要 ...

uni-app（一）----引入阿里云矢量图标库

添加图标

添加图标

uni-app（一）----引入阿里云矢量图标库相关推荐

最新文章

热门文章