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

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

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

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

讲真,同方全球传世尊享终身寿险回本速度超快,要不要买?

讲真,同方全球传世尊享终身寿险回本速度超快,要不要买?

最近,同方全球传世尊享上线了,这款产品跟平时的增额寿不同,它有一个特点,回本速度超快,几乎比同类产品的回本速度都快。 具体什么情况?同方全球传世尊享值不值得买?大家跟着奶爸一起来看看。同方全球传世尊享怎么样?同方全球传世尊享值不值得购买?奶爸总结一、同方全球传世尊享怎么样?...

【移动出行周报】嘀嗒出行三闯港交所 ofo彻底无法登录押金没戏了

【移动出行周报】嘀嗒出行三闯港交所 ofo彻底无法登录押金没戏了

原标题:【移动出行周报】嘀嗒出行三闯港交所 ofo彻底无法登录押金没戏了 2月第四周(2月18日-2月24日),移动出行领域发生了哪些事?以下为网经社移动出行台(DCX.100EC.CN)带来本周移动出行领域最新动态回顾。 【要闻速览】 1、青岛市202...

扎心了!PubMed 正式上线了新版本,却被 Science 无情吐槽(附新版超详教程)

扎心了!PubMed 正式上线了新版本,却被 Science 无情吐槽(附新版超详教程)

PubMed 是广大科研狗们一个常用和十分熟悉的网上免费生物医学数据库,最近他们上线了一个你从来没用过的船新版本。 然而 Science 却发表了一篇题为 They redesigned PubMed, a beloved website. It has...

2月份70城房价出炉 一线城市商品住宅价格环比上涨

2月份70城房价出炉 一线城市商品住宅价格环比上涨

今年2月份,70个大中城市中,一线城市新建商品住宅和二手住宅销售价格环比上涨,二三线城市环比持平或下降;一二线城市商品住宅销售价格同比涨幅回落或持平,三线城市同比下降。 2月份,一...

70城房价出炉!长沙2月新建商品住宅价格环比上涨0.2%

70城房价出炉!长沙2月新建商品住宅价格环比上涨0.2%

三湘都市报3月18日讯(文/视频全媒体记者卜岚实习生周逸婷)近日,国家统计局发布了今年2月70个大中城市房价数据。其中,30个城市房价上涨,40个城市房价下跌。一线城市新建商品住宅销售价格环比上涨0.5%,长沙新房价格环比上涨0.2%,二手房价格环比下跌0.2%。...

高度警惕,新型诈骗!这种二维码千万别扫!

高度警惕,新型诈骗!这种二维码千万别扫!

现在很多人都喜欢在网上购物并快递到家,不过警方提醒大家,对于来历不明的快递,要当心其中暗藏陷阱。近日,广东广州市荔湾区警方在网络巡查中发现,有人差点被这些“快递陷阱”诈骗了30万元。  张小姐近日收到一个快递,起初以为是商家赠送的福利,当她扫描礼物上的二维码后,莫名其妙就加入了一个聊天群。在群内,张...