700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > iconfont字体图标库的使用方法——angular版本

iconfont字体图标库的使用方法——angular版本

时间:2019-02-28 14:22:18

相关推荐

iconfont字体图标库的使用方法——angular版本

在前端开发中,好的icon图标的引用常常是页面展示的点睛之笔,能让页面简单明了。图标往往比文字能更加清晰的阐述页面提供给用户的操作意图。目前笔者比较推荐的icon库有蚂蚁的AntD自带的图标库https://ng.ant.design/components/icon/zh,以及fontawesome(屌爆的字体)/faicons/。然而,我们却仍然会遇到找不到想要的图标这种情况,笔者就经常为寻找一个合适的图标发愁。本文向大家推荐一个非常不错的icon库——iconfont阿里巴巴矢量图库/。

iconfont聚合了很多UI设计师的成果,其优点不仅在于汇聚了很多成熟的图标库,也在于提供了强大的搜索功能。能让前端开发人员快速找到想要的图标并下载到本地项目中。

招商银行的logo为例,假设我在web前端开发中需要引入招商银行的logo,但又在AntD和fontawesome中没找到,我该怎么办呢?

打开/,使用微博或github登录在搜索框中搜索“招商银行”或cmb,出现以下结果假设我们需要的就是第一个结果,点击购物车添加入库,随后在右上角的购物车图标中就能看到增加了一个图标。点击购物车,点击下载代码,则会下载一个download.zip,解压该压缩包。打开解压后的文件夹,将iconfont开头的所有文件,放到angular项目的src/assets/iconfont目录下打开angular项目中的angular.json文件,在styles下加入"src/assets/iconfont/iconfont.css",注意用逗号与上一个css文件分隔开。在html文件中(例如src/app/ponent.html),加入<i class="iconfont icon-cmb"></i>,使用ng s命令重新启动angular服务,项目打开后就能看到招商银行的logo啦!在此基础上,也可以继续对该图标进行一些css的修改,常见的比如调整color、尺寸等等。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。