700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 阿里巴巴字体图标库使用方法【前端类超详细】

阿里巴巴字体图标库使用方法【前端类超详细】

时间:2021-08-03 10:32:48

相关推荐

阿里巴巴字体图标库使用方法【前端类超详细】

作为一个前端程序员,iconfont阿里字体图标库肯定有所耳闻,这里基本可以找到你想要的图标,并且提供多种格式供您选择。

可能有的人会说,我们UI设计师会切好图发到我们手里。可万一要做的是自己项目,或者公司没有UI小姐姐,自己又没有PS、AI的使用能力,那么你就要依靠这个图标库了

使用方法

第一步-搜索图标添加至购物车

这里,我选择首页我的两个icon图标作为演示

第二步-查看购物车并添加至项目

点击右上角购物车图标,会展示你刚刚选择的图标,然后点击添加至项目。

最好添加至项目,方便增加、修改图标。会自动跳转项目页面。

第三步-生成字体css

点击生成代码,复制生成的地址,在浏览器打开。

复制浏览器后打开是这个样子,全部复制到你的编译器即可。

第四步-使用iconfont字体

复制到编译器为css文件,并在html文件内引入

注意:一定要加上iconfont这个类,再加上你要展示的icon类,如下图,否则图标不生效。

最后的话

如果是微信小程序内使用,则要后缀名要为wxss,不能为css。由于是字体类,所以可以更改大小颜色,并且不会失真,而且文件很小。不用css样式,也可以选择svg这种矢量格式,下载到本地,把它当图片一样使用即可,不会失真的哦。如果项目依赖icon很多,可以导入全局样式中,直接添加类名即可,很方便。

个人博客,欢迎来踩:/

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