uni-app如何引入iconfont

最新推荐文章于 2024-11-01 12:15:25 发布
原创 最新推荐文章于 2024-11-01 12:15:25 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #vue

本文介绍了在uni-app中引入阿里巴巴矢量图标的方法。先在阿里巴巴矢量图标库选图标添加到项目，生成在线链接并下载至本地，解压后用生成的@font-face代码替换iconfont.css里的对应部分，添加http。在src路径下新建文件夹，在App.vue全局引用iconfont.css，即可使用图标。

第一步打开阿里巴巴的矢量图标库网站，找到自己想要的图标添加到购物车，在右侧打开你添加的图标点击“添加至项目”

添加好之后打开“资源管理->我的项目”点击生成在线链接，切到Unicode选项下载至本地。

你会得到一个download名称的压缩包，解压打开里面的iconfont.css文件，使用编辑器进行处理，用刚刚在iconfont里面生成的@font-face代码替换掉iconfont.css里面的@font-face部分，并且加上在前面http

这个时候保存你可以新建一个文件夹到你的src路径下

这个时候点开你的编辑器，找到App.vue，全局引用iconfont.css，自行改了路径的自己另行修改

然后保存，这个时候你就可以随心所欲的使用的引用的图标了，如果你要颜色自行定义style


 

AMuMuion
关注
Uniapp 添加Iconfont
he_wen_jian的专栏
03-22 1909
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中的图标
码农键盘上的梦
04-15 8553
1.访问 iconfont-阿里巴巴矢量图标库，注册并登录账号, 2.浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。 3.完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件:
Uniapp在Vue环境中引入iconfont图标库（详细教程）
驴大毛的博客
11-01 1831
Uniapp在Vue环境中如何引入iconfont图标库的详细教程
UniaApp引入Iconfont
weixin_41562028的博客
08-31 921
官网把这个代码复制下来,替换iconfont.css的这段代码。通过以上步骤，就可以在 UniApp 项目中成功引入并使用。是你在阿里巴巴矢量图标库中对应的图标的类名。在页面的模板（template）中，通过。直接下载png使用即可。
【小程序开发】uniapp引入iconfont图标及使用方式
热门推荐
qq_49002903的博客
10-24 6万+
你还在发愁不知道如何在uniapp开发中使用iconfont阿里图标库吗？ 你还在是下载一张张图片用来开发项目嘛？来试试这个iconfont图标库，很香的
钉钉微应用iconfont在Android下图标找不到
xiasohuai的博客
05-10 720
低版本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矢量图各种坑
lawliet
11-01 6687
uni-app 是什么 uni-app 是一个借鉴 Vue.js、小程序、mpVue 开发跨平台应用的前端框架。 通过编写 一套代码，将其编译到iOS、Android、微信小程序等多个平台。 目前可以打包成Android、IOS的App、小程序 有一个严重问题就是用户群少，出现问题基本都要靠自己摸索，关键这样容易浪费特别多时间，谨慎入坑，要不是公司非要用...
如何解决Uni-app中iconfont图标不显示的问题？
最新发布
08-29
我们正在解决Uni-app中iconfont图标不显示的问题。根据引用内容，我们可以总结出以下几种常见原因及解决方案： 1. **字体文件路径错误**：在iconfont.css文件中，字体文件的路径可能不正确。在uni-app中，需要使用...
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
10-16
【基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能】 在现代互联网技术的推动下，直播已经成为了一种重要的社交和娱乐方式。本文将深入探讨如何使用vue和uni-app框架来构建一个类似抖音和陌陌的直播应用...
微信开发者工具中正常运行，发布后手机端打开是空白页/thirdScriptError问题/如何在uni-app使用iconfont
qq_38143787的博客
03-17 1649
开发的时候在微信开发者工具中一直都是正常显示，但是在打包的时候，iconfont图标部分不能被打包，报错编译错误88，由于是第一次使用uni-app开发小程序，所以就想着那就先发布看看会不会缺图标，结果发布之后，打开页面发现会是空白页，然后发现有报错信息，如下： thirdScriptError TypeError: Cannot read property 'getElementsByTagNa...
uniapp引入iconfont(阿里图标库)
曳猫的博客
04-28 1966
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字体图标
Moon Star
11-15 833
script： mounted() { const domModule = weex.requireModule('dom'); domModule.addRule('fontFace', { fontFamily: 'iconfont', src: "url('/static/mapIconfont/iconfont.ttf')" }); } template： <text class="iconfont">&#xe920;</text> styl
uni-app中引入 iconfont 图标
qq_44754016的博客
07-06 236
uni-app中引入 iconfont 图标 在iconfont 官网 添加图标到购物车 将图标下载到本地 项目里 在组件中 新建文件夹 iconfont 将 下载的压缩包 中 这两个文件放进来 将iconfont.css 文件内容处理一下 //at 前都加上 https: 在 app.vue 中 引入 页面中使用 最终效果： ...
uniapp项目中引入iconfont图标
weixin_52020362的博客
04-09 1091
uniapp引入iconfont图标
uniapp 引入阿里字体图标iconfont
weixin_43877778的博客
10-21 2633
uniapp 引入阿里字体图标iconfont
uni-app 使用 iconfont
u012746918的博客
03-08 1824
根据官网 小于 40kb 的字体文件可以直接本地引用。 　　方法如下： 　　　　首先下载字体文件。 　　　　然后删除多余文件，只需要留下 iconfont.ttf 和 iconfont.css 文件即可使用。 　　　　放入到 static 下。 　　　　修改 iconfont.css 文件，如下 　　　　 　　　　左侧红框里是留下的字体文件，右侧是修改 iconfont.css 样式。 　　　　然后，引入 样式文件： 　　　 　　　　最后，就可以在 项目中使用了。 　　　　
uni-app中使用iconfont
weixin_51198863的博客
02-20 731
前言 uni-app开发的项目是多端通用的，但我们知道每个端对代码的兼容性不大一样； app端不支持在main.js引入的css样式，需要在style中引用； 微信小程序不支持本地的字体图标文件，需要换成网络路径； 为了一套样式多端适用，我们使用下面这种方式来实现 首先打开阿里巴巴矢量图官网 复制图中的代码，那个是网络路径； 在uni-app项目中，app.vue文件下，style中粘贴并修改成如下样式 /*每个页面公共css */ @font-face { font-family: 'icon
在 uni app项目中引入 iconfont (本地引入和在线引入方式)
dongxiaogang5_5的博客
07-05 2358
首先登录 iconfont 官网（https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2） 找到需要的字体图标，如果创建项目组的话，就在–我的项目–点击，下载至本地；如果是直接加入购物车的话，就直接点击下载代码； 这两种方式都会下载一个 压缩文件，解压压缩文件之后，文件目录如下（其中我已经标注了两个文件名）： 将上图中标注的 CSS 文件 复制到项目中的static目录下，也可以是其他路径下，只要引入的时候路径对就ok;打开网址：
uniapp/vue 引入iconfont并动态修改icon颜色
搬砖小鱼，请多指教呦
05-24 1万+
一、引入iconfont iconfont官网： iconfont-阿里巴巴矢量图标库 1-选择想要的icon至购物车 2-添加至自己的项目 3-这里我选择的font，属于个人喜好，觉得更方便，还有其他方式选择，步骤差不多，点击生成代码，下载至本地（当然你也可以选择在线使用） 4-将iconfont.css等添加至自己的项目 5-在main.js中引入css文件 至此就可以使用我们的iconfont 使用方法如下 在iconfont.css中有我们下载的icon名..
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值