当前位置:首页 > 杂谈 > 正文内容

Ionic使用Iconfont-阿里巴巴矢量图标库

2023-06-07 18:55:11TONY杂谈786

Ionic有个自己的图标库,但是有些需要的图标还是没有,下面介绍一下阿里巴巴的矢量图标库,在Ionic中如何使用

由于度娘限制,自己百度下载地址吧~输入“阿里巴巴矢量图标库”百度搜索第一位就是啦

打开网址,你可以选择右上角的搜索,搜索自己要的图标,例如美女

也可以选择去图标库自行选择想要的图标

选择图标,点击图标变成橘色,即放在暂存架

再次点击即可取消,或者在暂存架中鼠标滑过图标,图标右上角有删除小按钮也可删除选中

选择好要用的图标后,点击暂存架的下载至本地,解压待用

打开解压的文件夹中的demo.html

我们下载的图标可看到了吧,按照demo的步骤,下面我们配置ionic的项目

静态文件存放目录,新建font文件夹用来存放字体文件(可自定义存放)

css使用font-face声明字体

css定义使用iconfont的样式

挑选相应图标并获取字体编码,应用于页面就可以显示图标啦

大家发现,Ionic的图标只要加个类似ion-happy  ion-XXX的class就可以应用相应的图标,那么我们怎么用阿里巴巴的矢量图标呢,不要急也有办法打开直接解压的图标文件中的iconfont.css文件

将那些.icon-XXX:before{content:XXXX}也复制到你的css文件中去看过ionic css文件源码的童鞋,是不是看到这些有点熟悉呢

那就对啦,只要在class中加 iconfont  icon-XXX就可以使用图标了

小编自己动手做了一个demo,下载了一些星座的表情的天气的还有其他的,发现个bug,就是Chrome调试星座、内衣还有雨伞的图标不能显示,放自己的android手机上就可以显示。如果小伙伴还有其他的不能显示的话不用奇怪,可以反映给他们官方微博

举报/反馈

“Ionic使用Iconfont-阿里巴巴矢量图标库” 的相关文章

【干货】小白如何在百度联盟上月赚3000+?实操经验分享

【干货】小白如何在百度联盟上月赚3000+?实操经验分享

百度联盟的广告模式主要是以CPC模式为主,是通过广告在网站上面展现以及用户的点击来获得收入的。那么小白如何在百度联盟商月赚3000+呢?下面小编就给大家分享一下相关的干货实操知识,希望每个人都能打成这个小目标! 1、有一个经常运营的有一定流量的网站 网站是什么类型...

保险到底是不是骗人的,如何筛选“好”产品

保险到底是不是骗人的,如何筛选“好”产品

前几天写了一篇关于谨慎利用保险工具的文章,没看过的可以先去看看《我是如何利用保险这个工具的?》,如果已经确定自己需要依靠保险来解决某些问题,那就可以去具体了解下保险产品。 正好明亚2023年1月份的产品热销榜单出来了,和团队小伙伴交流之后,我也就分模块来说一说各个产品的特点。...

雪榕生物:公司子公司雪榕源通过抖音平台有开展直播营销活动,您可以通过抖音“雪榕膳食旗舰店”详细了解

雪榕生物:公司子公司雪榕源通过抖音平台有开展直播营销活动,您可以通过抖音“雪榕膳食旗舰店”详细了解

雪榕生物(300511)03月24日在投资者关系平台上答复了投资者关心的问题。 投资者:话说食补同源,问一下公司有考虑中药材和菌菇混种提高菌菇高端品质吗? 雪榕生物董秘:尊敬的投资者,您好。感谢您对公司的关注。 投资者:请问近期在抖音官网推出的雪榕源产品是公司的产品...

原创
            70城房价最新公布!2月一线城市房价同比上涨:北京新房价格涨4.7%

原创 70城房价最新公布!2月一线城市房价同比上涨:北京新房价格涨4.7%

原标题:70城房价最新公布!2月一线城市房价同比上涨:北京新房价格涨4.7% 3月16日,国家统计局发布最新一期70城房价指数。2023年2月份,随着政策效果逐步显现及住房需求进一步释放,70个大中城市中商品住宅销售价格环比上涨城市个数继续增加,各线城市商品住宅销售价格环比总体...

电销卡的真正价值在哪里?

电销卡的真正价值在哪里?

电销卡的真正的价值在于可以高频,并且稳定抗封。现在电话销售市场鱼龙混杂,主要就是使用电销系统,电销线路以及电销卡进行外呼,很多电销系统还是依赖于电销卡外呼,只不过增加了CRM管理系统,方便于销售过程精细化管理,而真正的电销卡是不需要借助系统或者软件的,可以直接插卡使用,外显真实的11位手机...

AI热潮提振云服务需求 微软(MSFT.US)Q3业绩全线超预期! 盘后一度跃升超9%

AI热潮提振云服务需求 微软(MSFT.US)Q3业绩全线超预期! 盘后一度跃升超9%

智通财经APP获悉,美国科技巨头微软(MSFT.US)截至3月份的第三财季利润和销售额双双超出分析师预期,主要原因在于随着全球科技企业竞相布局生成式AI产品,各大企业对其重要产品...