uni-app项目中使用iconfont

最近在做uniapp 项目，正好要使用iconfont, 顺便做个小分享

1.首先要在iconfont 官网，点击资源管理--我的项目，点击页面中的➕

2. 选择需要的图标加入购物车，添加完毕，点击购物车选择添加至项目，选择创建的项目

3. 点击下载至本地，解压后，拷贝iconfont.css 至uniapp 项目中(我放在了common文件夹内)，点击在线链接，拷贝并替换iconfont.css 中的@font-face {} 部分内容4. 在App.vue 页面引入iconfont.css

@import url("@/common/iconfont.css");

5. 使用时前面记得加上iconfont, icon-jiahao1 为iconfont.css 文件内的图标

uni-app项目中使用iconfont相关推荐

Webpack项目中引入IconFont图标
本篇文章将介绍一下如何在Vue Webpack项目中引入IconFont图标. IconFont官网:https://www.iconfont.cn/ 1.打开IconFont官网并登陆自己的账户. ...
在uni-app的app项目中使用live-pusher实现人脸识别
在uni-app的app项目中使用live-pusher实现人脸识别前言一.环境二.使用步骤三.permission.js源代码四.face.vue源代码五.代码效果总结前言在uni ...
库项目和App项目中清单文件的包名不要相同
在清单文件中有一个包名,如下: <?xml version="1.0" encoding="utf-8"?> <manifest xmlns: ...
vue2 项目中引入iconfont
在线使用 1.找到这个地址,在index.html中link引入 <link rel="stylesheet" href="//at.alicdn.com/t/c/ ...
uniapp项目中引入iconfont图标
在项目中,难免出现图标不满足我们需求的情况,我们可以去阿里图标库(iconfont-阿里巴巴矢量图标库)选择我们满意的图标. 最近在做uniapp的项目,记录一下引入iconfont的步骤 1.去官网 ...
在Nuxt项目中使用iconfont阿里巴巴图标unicode
第一步:登录登录: iconfont阿里巴巴图标第二步:选择图标添加到购物车第三步:把购物车图标添加到项目第四步:找到我的项目第五步:将图标文件下载到本地第六步:在assets文件夹中创建 ...
项目中引用Iconfont（阿里巴巴矢量图标）的方式
Iconfont的官网:https://www.iconfont.cn/ 首先没有账号的需要先注册账号,可以用微博扫码或者GitHub账户登录. 登录成功后搜索框搜索到你需要的图标悬停在搜索结果中的 ...
uniapp项目中引用iconfont图标，实现信号强度图标展示（离线使用）
效果选择图标加入项目在项目设置中勾选base64和彩色,取消其它项查看生成的代码可以复制这一段代码,然后在项目中以这种方式使用 <text class="iconfont&qu ...
uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图二.解决方法 1.让其在输入框获取焦点时隐藏百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...

uni-app项目中使用iconfont

uni-app项目中使用iconfont相关推荐

最新文章

热门文章