uniapp如何引入iconfont图标库

最新推荐文章于 2024-08-31 08:30:00 发布
最新推荐文章于 2024-08-31 08:30:00 发布
阅读量2k 收藏 8
点赞数 10
分类专栏： uniapp 文章标签： css html5 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45018844/article/details/120757230
版权
本文介绍了如何在uniapp项目中引入iconfont图标库，包括从iconfont官网选择图标，创建CSS文件并复制样式代码，最后将CSS引入项目，并成功应用于微信小程序。
摘要由CSDN通过智能技术生成

第一步：

你得拥有一个uniapp项目
在这里插入图片描述

第二步

点击iconfont官网
在这里插入图片描述
在首页选好图标，在项目中新建一个css
在这里插入图片描述
将上面的1复制在css中，再点开下面这个链接
在这里插入图片描述
在这里插入图片描述
再复制这个&

了解本专栏 订阅专栏 解锁全文 超级会员免费看
小莉爱编程
关注
专栏目录
订阅专栏
在uni-app使用iconfont中的图标
码农键盘上的梦
04-15 5407
1.访问 iconfont-阿里巴巴矢量图标库，注册并登录账号, 2.浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。 3.完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件:
uni-app引入自定义图标库
weixin_44433499的博客
07-21 914
1.进入阿里图标库下载并解压字体图标库到本地(下载Unicode格式的) 方法一： 2.在项目根目录下创建common目录，并把iconfont.css文件放入common目录中 3.修改iconont.css里的@font-face（保留base64字体图标） 删除划线部分，保留结尾分号。 删除后： @font-face {font-family: "iconfont"; src:url('data:application/x-font-woff2;charset=utf-8;base64,d09
UniaApp引入Iconfont
最新发布
weixin_41562028的博客
08-31 448
官网把这个代码复制下来,替换iconfont.css的这段代码。通过以上步骤，就可以在 UniApp 项目中成功引入并使用。是你在阿里巴巴矢量图标库中对应的图标的类名。在页面的模板（template）中，通过。直接下载png使用即可。
如何在uniapp项目引入阿里图标库的iconfont(线上)
it_laowu的博客
05-11 2009
小程序中使用图片太大怎么办, 来看uniapp小程序中是如何使用阿里矢量图标库的字体图标的
【小程序开发】uniapp引入iconfont图标及使用方式
热门推荐
qq_49002903的博客
10-24 6万+
你还在发愁不知道如何在uniapp开发中使用iconfont阿里图标库吗？ 你还在是下载一张张图片用来开发项目嘛？来试试这个iconfont图标库，很香的
4.uniapp如何引入iconfont图标
m0_56986233的博客
03-19 3286
1.准备一份iconfont图标库 这里我给大家省功夫，代码如下 @font-face { font-family: "iconfont"; /* Project id 3231515 */ src: url('//at.alicdn.com/t/font_3231515_h5tzgobi5z.woff2?t=1646898877456') format('woff2'), url('//at.alicdn.com/t/font_3231515_h5tzgobi5z.woff?t=164
【小程序开发】uniapp中引入iconfont方式 保姆级教程
m0_64373473的博客
09-21 2020
uniapp中引入iconfont
uniapp引入iconfont图标
06-28
要在uniapp中引入iconfont...注意：如果需要使用多个iconfont图标库，需要将它们的字体文件和css文件分别放在不同的文件夹中，并在App.vue文件中分别引入。同时，不同的图标库可能会有相同的类名，需要注意避免冲突。
在uniapp、vue 中引入iconfont图标
weixin_48789376的博客
04-13 566
1、先在iconfont挑选图标(https://www.iconfont.cn/)，吧想要的图标先加入购物车 2、再将图标添加到项目中，没有项目的，可以先新建一个项目 3、将刚刚选的图标下载到本地 4、解压后，将需要的文件添加到项目中 5、复制以下代码，将iconfont.css中的内容替换 将原来文件中下面那部分内容替换成刚刚复制的内容，替换钱前： 替换后：再复制的内容连接前面要加上https 6、再在app.vue文件中引入样式 7、使用 <view class="iconfont icon
uniapp+editor图标文件+iconfont.ttf
03-10
uniapp editor富文本编辑器的图标文件
uniapp正确引入本地iconfont（阿里图标库）（亲测无问题）
高桥留de博客
12-07 1035
uniapp正确引入本地iconfont（阿里图标库）
Uniapp 添加Iconfont
he_wen_jian的专栏
03-22 1771
1：创建/font/iconfont.css 在线方式： @font-face { font-family: "iconfont"; /* Project id 3266214 */ src: url('https://at.alicdn.com/t/font_3266852_eypzg2x8bh8.ttf?t=1647920902148') format('truetype'); } 离线方式： @font-face { font-family: "iconfont";
在 uni app项目中引入 iconfont (本地引入和在线引入方式)
dongxiaogang5_5的博客
07-05 2225
首先登录 iconfont 官网（https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2） 找到需要的字体图标，如果创建项目组的话，就在–我的项目–点击，下载至本地；如果是直接加入购物车的话，就直接点击下载代码； 这两种方式都会下载一个 压缩文件，解压压缩文件之后，文件目录如下（其中我已经标注了两个文件名）： 将上图中标注的 CSS 文件 复制到项目中的static目录下，也可以是其他路径下，只要引入的时候路径对就ok;打开网址：
uniapp引入 iconfont
詹Sir的博客
11-04 737
有时候内置的图标无法完全满足需求，我们可以引用阿里矢量图标iconfont
uniapp 引入iconfont的方法
Gblfy_Blog
06-28 3100
uniapp 引入iconfont的方法
uni-app小程序引入iconfont的三种方式详解（无需下载文件到项目）
qq_39961695的博客
12-31 1万+
全：小程序中使用iconfont的三种方式
钉钉微应用iconfont在Android下图标找不到
xiasohuai的博客
05-10 592
低版本android他不支持woff2格式的字体,必须要使用woff格式字体,由于从默认iconfont网站上下载来的字体,woff2排在woff之前,所以导致android无法正确识别到woff了 @font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1557465831153'); /* IE9 */ src: url('iconfont.eot?t=1557465831153#iefix') format('embedd
uni-app 使用 iconfont
u012746918的博客
03-08 1745
根据官网 小于 40kb 的字体文件可以直接本地引用。 　　方法如下： 　　　　首先下载字体文件。 　　　　然后删除多余文件，只需要留下 iconfont.ttf 和 iconfont.css 文件即可使用。 　　　　放入到 static 下。 　　　　修改 iconfont.css 文件，如下 　　　　 　　　　左侧红框里是留下的字体文件，右侧是修改 iconfont.css 样式。 　　　　然后，引入 样式文件： 　　　 　　　　最后，就可以在 项目中使用了。 　　　　
uniapp天气预报图标库
09-02
鉴于目前的引用内容中没有提到uniapp天气预报图标库的具体信息，我无法为您提供确切的答案。然而，根据常见的做法，您可以在uni-app的插件系统中寻找与天气预报相关的图标库。这些图标库通常提供了各种天气条件的图标，如晴天、多云、雨天等。您可以在uni-app的官方文档或插件市场中查找相关的插件或组件，找到适合您项目需求的天气预报图标库。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [uniapp感想](https://blog.csdn.net/ciaotiancai/article/details/131336209)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小莉爱编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值