uni-app中使用iconfont字体图标教程

最新推荐文章于 2024-04-29 21:57:13 发布
最新推荐文章于 2024-04-29 21:57:13 发布
阅读量1k 收藏 5
点赞数 1
分类专栏： 小程序 文章标签： css vue.js uniapp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LW0512/article/details/125891220
版权

uni-app中使用iconfont字体图标教程

1.在iconfont上选取需要的图标放置在项目里

2.下载至本地并解压文件

在这里插入图片描述

3.下载下来后是个压缩包，里面包含了自己的文件（8个文件） 如图：

在这里插入图片描述

4 打开项目在static文件夹下创建一个叫font的文件夹 把该解压的文件放在font目录下

在这里插入图片描述

5 要使字体图标在全局生效，在App.vue中引入解压的iconfont.css样式表

在这里插入图片描述

6 修改css引用路径（因为默认网页中css引用当前文件夹下的字体文件是没问题的，但是在uniapp中需要去修改iconfont.css中的引用字体的文件位置）不然的话就会报文件查找失败的错误

在这里插入图片描述

7 在代码中使用（注意前面必须加iconfont ）

在这里插入图片描述

LW0512
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app 中使用uni push的demo
02-21
1、在uni-app 中使用uni push； 2、可以实现在demo 中发送推送
uni-app 富文本编辑 回显富文本和修改富文本！
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富...
在uni-app使用iconfont中的图标
码农键盘上的梦
04-15 2297
1.访问 iconfont-阿里巴巴矢量图标库，注册并登录账号, 2.浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。 3.完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件:
uniapp tabBar使用iconfont 字体图标
weixin_41623830的博客
05-07 9043
&#xe 改为 \ue, 例如: "text": "\ue783" "tabBar":{ "iconfontSrc":"./static/font/iconfont.ttf", "list":[ { "text":"书架", "pagePath":"pages/index/index", "iconfont": { "text": "\ue610", "selectedTe
uniapp关于iconfont字体图标使用
最新发布
无
04-29 826
7、使用代码，主要是引用iconfont icon-search样式，注意u-search的placeholder设置不了样式，所以重写样式处理。5、将包里的iconfont.css和iconfont.ttf文件分别放在以下目录，并在App.vue里引入iconfont.css。6、iconfont.css代码，注意src只保留.ttf后缀名代码，路径设置为iconfont.ttf文件放置路径。1、打开[阿里巴巴矢量图标库](https://www.iconfont.cn/)，选择需要的图标添加到购物车。
uni-app中使用iconfont字体图标
asteriaV的博客
03-24 2134
在一些项目中，我们需要使用阿里巴巴矢量字体图标库的图标，如果单个下载势必过于麻烦，这个就是自己创建好然后进入即可。 第一步，找到阿里巴巴矢量字体图标库，登录官网 把你需要的图标添加至购物车，创建项目 第二步，进入项目，首先选择Unicode,然后点击下载至本地 第三步，找到该文件，解压，然后把该解压好的文件放到所需项目的static文件里 第四步，找到你刚才引入的图标文件（i...
【uni-app】使用iconfont字体
Erin_jwx的博客
08-11 221
第一步 搜索需要的图标，选择图标添加入库 第二步 网页导航栏的右上角点开购物车，查看已入库图标 第三步 新建项目，尽量把同一个项目中用到的图标放在一起 第四步 将图标下载至本地，解压 第五步 将以下两个文件导入到项目的static下 第六步 修改iconfont.css文件 代码如下 @font-face { font-family: "iconfont"; src: url('~@/static/fonts/iconfont.ttf'); } 第七步 在App.vue中引
uniapp 使用iconfont 字体
weixin_46814321的博客
08-30 446
3） 将下载完成的文件解压到项目中，static文件下。5）在需要使用的地方使用font-fm类名即可。2）看上哪个字体 ，就点击字体包下载。4）App.vue文件中全局引用；
uniapp中使用iconfont图标库
m0_52364694的博客
09-08 281
分三步 一、下载所需的iconfont图标，并解压到uniapp项目common文件夹下(没有common文件夹可以新建一个) 二、mian.js中引入，引入代码 import ‘./common/解压后的文件夹名/iconfont.css’。 这里的"解压后的文件夹名"需要根据你自己解压文件来确定，每次下载iconfont图标都会不一样 三、使用 pages/index/index.vue中测试代码 ...
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
uni-app使用微信小程序云函数的步骤示例
10-15
在本教程中，我们将深入探讨如何在uni-app中使用微信小程序云函数。uni-app是一个多端开发框架，它允许开发者使用一套代码实现跨平台应用，包括iOS、Android、H5、微信小程序等。而微信小程序云函数则是在微信小程序...
UNI-APP 中sqlite demo 增删查改
06-24
本demo包含 自己封装的sqlite.js 页面功能 打开关闭数据库 创建表、删除表 新增表数据、删除表数据 查询表数据、编辑表数据 可按条件操作，删除、查询表数据
iconfont 图标如何在uniapp中的tabBar使用
qq_40259123的博客
02-20 4794
iconfont 图标如何在uniapp中的tabBar使用
uniapp导航栏使用iconfont
EvaY_Yang的博客
08-23 1319
uniapp导航栏使用iconfont来配置多个按钮。
uniapp字体图标的使用
qq_36158551的博客
12-31 141
uniapp字体图标的使用
uniapp中如何使用字体图标
飞猪
04-26 306
uniapp中如何使用字体图标 我使用的是阿里的字体图标 1 将需要的图标添加到项目中去下载到本地 2 解压，放到项目的static下面（主要用到的是这六个,其他没用的可以删了） 3 修改 iconfont.css里面的路径（加圈起来的红色部分） 4 在App.vue中引入（main.js中引入都行） @import "/static/font/iconfont.css"; 5 使用 （挑选相应图标并获取字体编码，应用于页面） demo_index.html中有例子，cv大法。。。 <vie
uni-app项目中使用iconfont
weixin_43939519的博客
03-23 1655
最近在做uniapp 项目，正好要使用iconfont, 顺便做个小分享 1.首先要在iconfont 官网，点击 资源管理--我的项目，点击页面中的➕ 2. 选择需要的图标加入购物车，添加完毕，点击购物车选择添加至项目，选择创建的项目 3. 点击下载至本地，解压后，拷贝iconfont.css 至uniapp 项目中(我放在了common文件夹内)，点击在线链接，拷贝并替换iconfont.css 中的@font-face {} 部分内容4. 在App.vue 页面引入iconfont.css @
uniapp使用iconfont-阿里巴巴矢量图标库设置tabBar图标
m0_45858045的博客
02-03 1021
下载方式有两种，可以选择png，这种方法就是直接图片放到static文件家里，在pages.json的tabbar里面进行引用就可以了。完成所有图标之后可以进行下载，如果是使用方法二则不需要下载别的颜色的图标，只需要下载一种就可以了。2.找到想要的图标，可以直接搜索，我现在要找到适合首页，关于，还有列表的一些图标。uniapp的tabbar页面，有图标还有选择图标，设置不同的颜色。编辑好需要的图标，可以更改，完成之后选择保存为副本，也可以更改名称。刚刚选择好的图标添加到了新闻项目里面。
解决uniapp的tabBar使用iconfont图标显示方块
qq_43687594的博客
07-29 2215
icon图标显示小方块，搜索了很多文档说需要将iconfont.css文件里的src改为绝对路径啥的，我不知道为啥，按照他们的改了之后，不报错，也出不来。不过丑话说前面，每个人报错的原因都不一定相同，请自己进行排查错误之后，再针对性参考别人的意见，当然，代码这东西很玄学，有的时候，什么都对，就是出不来，也不是没有可能的。想着就是需要简单的引入图标即可，但万万没想到，uniapp的坑，让我猝不及防，好在摸索了大半天，总算有个好的结果，为了记录这次跌倒的坑，决定写下来，希望能帮到其他人。
uni-app接入iconfont图标库
09-12
5. 使用图标：现在可以在uni-app的页面代码中使用iconfont图标了。可以通过以下方式使用图标： ``` <i class="iconfont icon-图标名称"> ``` 其中，icon-图标名称是在iconfont官网中给图标定义的类名。 通过以上...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值