uniapp项目中引入iconfont图标

在项目中，难免出现图标不满足我们需求的情况，我们可以去阿里图标库（iconfont-阿里巴巴矢量图标库）选择我们满意的图标。

最近在做uniapp的项目，记录一下引入iconfont的步骤

1、去官网选择自己喜欢的图标，然后下载到本地

2、解压到自己项目的static中，可以在static文件夹中新建一个iconfont文件夹放进去。

3、在项目的App.vue中引入

4、修改iconfont中的iconfont.css文件

将箭头标注的地方改成自己项目中存放图标的目录即可。

5、使用即可

效果如下：

uniapp项目中引入iconfont图标相关推荐

Webpack项目中引入IconFont图标
本篇文章将介绍一下如何在Vue Webpack项目中引入IconFont图标. IconFont官网:https://www.iconfont.cn/ 1.打开IconFont官网并登陆自己的账户. ...
uniapp项目中引用iconfont图标，实现信号强度图标展示（离线使用）
效果选择图标加入项目在项目设置中勾选base64和彩色,取消其它项查看生成的代码可以复制这一段代码,然后在项目中以这种方式使用 <text class="iconfont&qu ...
项目中引入阿里巴巴图标——iconfont图标的使用-svg格式
项目中引入阿里巴巴图标--iconfont图标的使用-svg格式一.下载图标 1.先进入iconfont.cn页面 iconfont官网:https://www.iconfont.cn/ 2.登陆, ...
如何在uni-app中引入iconfont图标
如何在uni-app中引入iconfont图标 step1 在iconfont中找到你要的图标,这里和vue其他地方引用的步骤一致,如果是第一次使用iconfont请自行百度使用方法,因为我一直使用的 ...
uni-app项目中使用iconfont
最近在做uniapp 项目,正好要使用iconfont, 顺便做个小分享 1.首先要在iconfont 官网,点击资源管理--我的项目,点击页面中的➕ 2. 选择需要的图标加入购物车,添加完毕,点击 ...
uniapp项目中使用阿里图标
一.uniapp引入阿里图标 1.第一步:选择想要的图标加入购物车注意:批量注入的方法(按F12 在console里面输入下方的代码) var span = document.querySelect ...
vue2 项目中引入iconfont
在线使用 1.找到这个地址,在index.html中link引入 <link rel="stylesheet" href="//at.alicdn.com/t/c/ ...
前端学习笔记系列一：5 在项目中引入阿里图标icon
进入到阿里的图标库网站,里面有上百万种icon,https://www.iconfont.cn,需要注册一个帐号,然后进入到这个页面,在这里点击右下角的带加号的图标,创建一个新的项目,名称与你要使用图 ...
vue项目中引入iconfont
背景对于前端而言,图标的发展可谓日新月异.从img标签,到雪碧图,再到字体图标,svg,甚至svg也有了类似于雪碧图的方案svg-sprite-loader.雪碧图没有什么好讲的了,只是简单地利用了 ...

uniapp项目中引入iconfont图标

uniapp项目中引入iconfont图标相关推荐

最新文章

热门文章