uniapp正确引入本地iconfont（阿里图标库）（亲测无问题）

最新推荐文章于 2024-08-31 08:30:00 发布
最新推荐文章于 2024-08-31 08:30:00 发布
阅读量1k 收藏
点赞数 3
分类专栏： uniapp 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/everMrzhong/article/details/134848590
版权
这篇博客详细介绍了如何在uni-app项目中正确引入本地的阿里iconfont图标库，包括将ttf文件转为base64，修改iconfont.css的@font-face，以及在App.vue中引入css文件。经验证，这种方法适用于H5、小程序和APP平台。
摘要由CSDN通过智能技术生成

1.文件说明

从阿里巴巴iconfont下载的文件中包含 iconfont.ttf、iconfont.css， 将 iconfont.ttf文件转位 base64。

2.转换地址

转换地址

3. 操作方式

3.1 打开 iconfont.css文件，修改 @font-face 部分，将转换好的 base64代码粘贴到对应位置，并且设置 代码如下：

@font-face {
     
  font-family: "iconfont";  
  src
了解本专栏 订阅专栏 解锁全文 超级会员免费看
高桥留
关注
专栏目录
订阅专栏
uniapp如何引入iconfont图标库
qq_45018844的博客
10-14 2101
第一步： 你得拥有一个uniapp项目 第二步 点击iconfont官网 在首页选好图标，在项目中新建一个css 将上面的1复制在css中，再点开下面这个链接 再复制这个，在css中，下面就是css的代码了 @font-face { font-family: 'iconfont'; /* Project id 2859888 */ src: url('//at.alicdn.com/t/font_2859888_csff1a0k5tm.woff2?t=1634008673174') fo
uniapp - 引入使用阿里图标后在移动端显示“文件查找失败“不显示问题，但在h5端平台却可以正常显示（uniapp引入iconfont文件报错文件查找失败：./iconfont.woff?t=）
高级前端工程师
02-01 2173
uniapp，h5，移动端，阿里图标库，阿里巴巴图标，uniapp使用阿里图标库不显示怎么办，解决uniapp引入阿里图标报文件查找失败，uniapp报错iconfont文件报错文件查找失败，uniapp移动端不显示阿里图标， uniapp app中阿里图标库不能使用，uniapp项目中iconfont阿里云图标不显示，uni-app引入阿里矢量图在移动端不显示的问题，移动端不显示但在h5网页能显示，阿里图标在移动端无法显示怎么办，如何解决uniapp引入阿里图标后在h5能显示，但在移动端平台却不显示，un
uni-app（使用阿里图标）
小林的博客
03-28 1500
uni-app，使用自定义图标
UniaApp引入Iconfont
最新发布
weixin_41562028的博客
08-31 554
官网把这个代码复制下来,替换iconfont.css的这段代码。通过以上步骤，就可以在 UniApp 项目中成功引入并使用。是你在阿里巴巴矢量图标库中对应的图标的类名。在页面的模板（template）中，通过。直接下载png使用即可。
钉钉微应用iconfont在Android下图标找不到
xiasohuai的博客
05-10 609
低版本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
uniapp引入本地iconfont
王延朕的博客
12-06 1354
2.我们可以用的是 iconfont.css, 我们将 iconfont.css 拷贝至项目的 src/static/font/iconfont.css。1.iconfont官网下载相应代码（
uniapp引入iconfont图标
再简单的事，也要用心做成！
07-22 240
步骤 打开阿里适量图库https://www.iconfont.cn/，找到需要的图标，加入购物车，并把图标加入一个项目 2.点击“生成代码”，生成font-face相关代码；点击下载，生成相关文件 3 找到下载文件中的iconfont.css，复制到项目的static/icontfont的文件夹下；在App.vue文件中引入iconfont.css文件 4.复制步骤3生成的代码，替代iconfont.css文件中的 5.最后使用： ...
uniapp引入iconfont
qq_37953045的博客
07-27 786
uniapp引入iconfont
uniapp 中使用彩色图标，引入阿里图库iconfont
hu104160112的博客
06-18 1516
1.选择symbol模式，下载到本地 2.下载后解压 3.在解压开的文件夹中 shift+右键 打开powershell 窗口 执行代码：npm install -g iconfont-tools 4.然后执行代码：iconfont-tools 然后一路回车 5.文件夹中就多出一个文件 iconfont-weapp 6.把 iconfont-weapp-icon.css 移入你的项目中 7.App.vue中添加以下代码 @import "./common/iconfont-weapp/iconf
UNIAPP小程序使用ICONFONT彩色图标
Fairy_Yss的博客
11-27 417
UNIAPP小程序使用ICONFONT彩色图标 标签： 微信 1、进入阿里巴巴矢量图标库https://www.iconfont.cn/，添加图标到项目，然后下载至本地 解压后的本地文件如下 2、下载iconfont-tools npm install -g iconfont-tools 进入解压后的文件夹，如上图所示目录，命令行运行 iconfont-tools 然后一直enter,然后就会多出来一个iconfont-weapp的文件夹 进入文件夹,将其中的iconfont-weapp-icon
uniapp引入阿里巴巴矢量图标库
Gzyhjf9的博客
05-18 1629
uni-app中使用阿里巴巴矢量图标库 1、打开网址，链接： 阿里巴巴矢量图标库 2、注册账号并登录，已有账号直接登录 3、选择图标，点击添加入库 4、点击购物车图标，查看添加入库的图标 5、点击“添加至项目”，可以选择将图标添加至已有项目中，或添加至新创建项目中。 6、添加成功后，进入项目详情页面，可以看到当前项目所包含的所有图标。 注意： 添加新图标至项目后，需要点击”更新代码“。并将更新后的代码重新下载，导入项目中。 7、下载代码至本地 8、找到下载的压缩包，解压缩后复制 iconfo
uniapp引入 iconfont
詹Sir的博客
11-04 752
有时候内置的图标无法完全满足需求，我们可以引用阿里矢量图标iconfont
uniapp引入iconfont(阿里图标库)
曳猫的博客
04-28 1826
uni引入阿里图标库(iconfont) 1 首先找到自己要的图标 2 添加入库 3 添加到项目（选择或者新建项目添加） 4 下载到本地 5 解压下载的压缩包 6 复制iconfont.css 到项目 复制到项目的common 7 iconfont.css文件添加 以下代码 text[class*="icon-"], view[class*="icon-"], button[class...
UNI-APP引入iconfont的方法
qq_24537119的博客
03-05 1592
在uniapp中引入iconfont的方法有两种，一种是本地引入的，还有一种是在线引入的。 先说一下在线引入的方法，在iconfont中创建一个你自己的项目，之后添加一些图标进去， 选择unicode然后复制代码。然后下载代码至本地，在里面找到iconfont.css我们只用这个，拿到CSS之后放进我们的uniapp项目中，并将代码张贴上去，替换掉之前的代码 在app.vue中引入CSS文件 使用的时候也很简单 可以看到上面的方法还是引入了外链的，我们普遍是不喜欢这样做的，总.
uniapp 引入iconfont的方法
Gblfy_Blog
06-28 3126
uniapp 引入iconfont的方法
uni-app 简单引入iconfont示例（阿里妈妈）
Li_Ning21的博客
02-07 1066
找到自己需要的图标，添加到购物车。放到 static/css 中。点击左上角购物车，添加至项目。然后进入项目中，导出。
uni-app 使用 iconfont
u012746918的博客
03-08 1763
根据官网 小于 40kb 的字体文件可以直接本地引用。 　　方法如下： 　　　　首先下载字体文件。 　　　　然后删除多余文件，只需要留下 iconfont.ttf 和 iconfont.css 文件即可使用。 　　　　放入到 static 下。 　　　　修改 iconfont.css 文件，如下 　　　　 　　　　左侧红框里是留下的字体文件，右侧是修改 iconfont.css 样式。 　　　　然后，引入 样式文件： 　　　 　　　　最后，就可以在 项目中使用了。 　　　　
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

高桥留

打赏更新更快！质量更好！

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

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

打赏作者

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

抵扣说明：

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

余额充值