uni-app如何引入iconfont

最新推荐文章于 2024-05-11 16:37:28 发布
最新推荐文章于 2024-05-11 16:37:28 发布
阅读量922 收藏 1
点赞数 1
文章标签： uni-app vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AMuMuion/article/details/110468807
版权

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

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

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

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

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

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


 

AMuMuion
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uniapp如何引入iconfont图标库
qq_45018844的博客
10-14 1944
第一步： 你得拥有一个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
uni-app案例 仿微信页面（无响应）
06-16
【uni-app案例 仿微信页面（无响应）】 在移动应用开发领域，uni-app是一个备受开发者欢迎的跨平台框架，它允许开发者使用一套代码库来构建iOS、Android、H5、小程序等多个平台的应用。本案例将探讨如何使用uni-app...
钉钉微应用iconfont在Android下图标找不到
xiasohuai的博客
05-10 564
低版本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(线上)
最新发布
it_laowu的博客
05-11 746
小程序中使用图片太大怎么办, 来看uniapp小程序中是如何使用阿里矢量图标库的字体图标的
uni-app引入iconfont字体图标
Moon Star
11-15 722
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 168
uni-app中引入 iconfont 图标 在iconfont 官网 添加图标到购物车 将图标下载到本地 项目里 在组件中 新建文件夹 iconfont 将 下载的压缩包 中 这两个文件放进来 将iconfont.css 文件内容处理一下 //at 前都加上 https: 在 app.vue 中 引入 页面中使用 最终效果： ...
Uniapp 添加Iconfont
he_wen_jian的专栏
03-22 1745
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";
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
10-16
【基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能】 在现代互联网技术的推动下，直播已经成为了一种重要的社交和娱乐方式。本文将深入探讨如何使用vue和uni-app框架来构建一个类似抖音和陌陌的直播应用...
基于uni-app多平台管理系统模板, H5, Android, IOS, Min Program
04-28
基于uni-app多平台管理系统模板, H5, Android, IOS, Min Program。更加完善的开发指南 主题定制；支持颜色主题和深色模式，页面更加美观；国际化/多语言：应用内容和pages.json国际化，支持N种语言；引入iconfont：...
我:基于uni-app和小程序云开发实现的时间投资微信小程序
01-27
本项目被刊登在阮一峰老师的科技爱好者周刊中技术栈uni-app：使用vue.js的开发思维和开发习惯编写微信小程序代码小程序云开发：实现无需搭建服务器，即可使用云端能力，弱化后端和运维概念uCharts：实现图表功能...
uni-app 使用 iconfont
u012746918的博客
03-08 1720
根据官网 小于 40kb 的字体文件可以直接本地引用。 　　方法如下： 　　　　首先下载字体文件。 　　　　然后删除多余文件，只需要留下 iconfont.ttf 和 iconfont.css 文件即可使用。 　　　　放入到 static 下。 　　　　修改 iconfont.css 文件，如下 　　　　 　　　　左侧红框里是留下的字体文件，右侧是修改 iconfont.css 样式。 　　　　然后，引入 样式文件： 　　　 　　　　最后，就可以在 项目中使用了。 　　　　
在 uni app项目中引入 iconfont (本地引入和在线引入方式)
dongxiaogang5_5的博客
07-05 2177
首先登录 iconfont 官网（https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2） 找到需要的字体图标，如果创建项目组的话，就在–我的项目–点击，下载至本地；如果是直接加入购物车的话，就直接点击下载代码； 这两种方式都会下载一个 压缩文件，解压压缩文件之后，文件目录如下（其中我已经标注了两个文件名）： 将上图中标注的 CSS 文件 复制到项目中的static目录下，也可以是其他路径下，只要引入的时候路径对就ok;打开网址：
UNI-APP引入iconfont的方法
qq_24537119的博客
03-05 1524
在uniapp中引入iconfont的方法有两种，一种是本地引入的，还有一种是在线引入的。 先说一下在线引入的方法，在iconfont中创建一个你自己的项目，之后添加一些图标进去， 选择unicode然后复制代码。然后下载代码至本地，在里面找到iconfont.css我们只用这个，拿到CSS之后放进我们的uniapp项目中，并将代码张贴上去，替换掉之前的代码 在app.vue中引入CSS文件 使用的时候也很简单 可以看到上面的方法还是引入了外链的，我们普遍是不喜欢这样做的，总.
uniapp 引入iconfont的方法
Gblfy_Blog
06-28 3035
uniapp 引入iconfont的方法
【小程序开发】uniapp引入iconfont图标及使用方式
热门推荐
qq_49002903的博客
10-24 6万+
你还在发愁不知道如何在uniapp开发中使用iconfont阿里图标库吗？ 你还在是下载一张张图片用来开发项目嘛？来试试这个iconfont图标库，很香的
【小程序开发】uniapp中引入iconfont方式 保姆级教程
m0_64373473的博客
09-21 1882
uniapp中引入iconfont
4.uniapp如何引入iconfont图标
m0_56986233的博客
03-19 3262
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
uni-app小程序引入iconfont的三种方式详解（无需下载文件到项目）
qq_39961695的博客
12-31 9277
全：小程序中使用iconfont的三种方式
uni-app+iconfont 实现星级评分
06-11
要在uni-app中实现星级评分，可以使用iconfont图标库来表示星级评分的五颗星。以下是实现步骤： 1. 在iconfont官网上搜索并下载五颗星的图标，下载完成后解压缩。 2. 将解压缩后的文件中的iconfont.css复制到项目...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值