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

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

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

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-阿里巴巴矢量图标库” 的相关文章

“智慧轻奢旗舰SUV”星途瑶光全球首发上市,起售价15.28万元

“智慧轻奢旗舰SUV”星途瑶光全球首发上市,起售价15.28万元

二月二、龙抬头(2月21日),“智慧轻奢旗舰SUV”星途瑶光在上海外滩电竞国际文化中心全球高光上市,打响了2023年中国高端SUV市场开门红第一枪。新车共推出400T TGDI两驱、400T TGDI四驱两种车型共6个型号,售价区间为15.28-20.28万元。从此前的专...

同方全球传世尊享终身寿险,真实IRR内部收益率测算

同方全球传世尊享终身寿险,真实IRR内部收益率测算

同方全球传世尊享终身寿险,属于是增额终身寿险,所有的收益情况全部体现在现金价值上,虽然合同约定保险金额每年以3.5%递增,但这个跟收益没任何关系。所以,到底是不是好产品,还是需要详细测算收益。 下面以30岁男性举例,一次性趸交10万,之后若在第10、20、30、40、50...

吉林敖东(000623.SZ):子公司健康科技开通了抖音平台保健品旗舰店,将继续加强与辛选集团合作

吉林敖东(000623.SZ):子公司健康科技开通了抖音平台保健品旗舰店,将继续加强与辛选集团合作

格隆汇4月25日丨吉林敖东(000623.SZ)于2023年4月21日举行路演活动,就“请问贵司大健康板块有无分拆上市计划?”,公司表示,2022年,子公司健康科技增资扩股引进战略投资者,在优化健康科技资本结构的同时,利用战略投资者资源开展大健康板块业务,充分发挥和整合各自资源优势,提高公...

香港汇丰银行的网银注册流程

香港汇丰银行的网银注册流程

1、打开官网进行注册 打开汇丰香港的官网:http://www.hsbc.com.hk,点击右上角的登录-注册 打开汇丰香港的官网-点击右上角的登录-注册2、选择银行账户,然后按照提示来操作 选择银行账户3、按照提示来填写账户资料 ①银行户口号码:即香港汇丰...

继续削弱俄罗斯,G7国家考虑“颠覆现有的制裁模式”,近乎全面禁止对俄出口,克宫回应

继续削弱俄罗斯,G7国家考虑“颠覆现有的制裁模式”,近乎全面禁止对俄出口,克宫回应

综合美国彭博社、日本共同社等媒体21日报道,以美国为首的西方国家考虑近乎全面禁止对俄出口。对此,俄方表示关注,并强调新的制裁势必损害全球经济。日本是2023年G7轮值ZX国,峰会将于5月19日至21日在广岛举行。据报道,G7官员将在峰会前就对俄全面加码的提案进行讨论,目的是拉拢欧盟各个成员...

2022年4月26日世界知识产权日

2022年4月26日世界知识产权日

世界知识产权日(The World Intellectual Property Day),由世界知识产权组织于2001年4月26日设立, 并决定从2001年起将每年的4月26日定为"世界知识产权日", 目的是在世界范围内树立尊重知识、崇尚科学和保护知识产权的意识, 营造鼓励知识创新的法律环...