阿里矢量图标库的正确食用方法

2019年7月7日01:14:59 发表评论 676

阿里矢量图标库的正确食用方法

Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。

本文我们就来一起学习一下iconfont字体图标库的使用吧。

首先打开Iconfont-阿里巴巴矢量图标库

阿里矢量图标库的正确食用方法

登录进去,我用的是自己的新浪微博账号。登录成功后,选择我的项目,去新建一个项目

阿里矢量图标库的正确食用方法

阿里矢量图标库的正确食用方法

阿里矢量图标库的正确食用方法

项目新建好了以后,内部还没有任何图标,接下来,我们可以类似淘宝购物一样去获取想要的图标。

看到你喜欢的图标,选择添加入库

阿里矢量图标库的正确食用方法

也可以直接在搜索栏进行图标的搜索!

阿里矢量图标库的正确食用方法

挑选完毕之后,我们还需要把库里的图标添加至项目:

阿里矢量图标库的正确食用方法

阿里矢量图标库的正确食用方法

阿里矢量图标库的正确食用方法

复制一下代码,接着在对应的页面中引入(begin主题在设置中填入即可开启):

  1. <link type="text/css" rel="styleSheet"  href="//at.alicdn.com/t/font_578430_rar6t76yrc545cdi.css" />

图标引用:

  1. <i  class='iconfont icon-changpianCD'></i>

图标过大或过小可以用这个自己调节px大小

  1. <i style="font-size:20px;" class='icon-changpianCD'>

如果是多色图标,就引入js文件,图标格式为:

  1. <svg aria-hidden="true">
  2.   <use xlink:href="#icon-squirtle"></use>
  3. </svg>

WordPress菜单引用事例
阿里矢量图标库的正确食用方法

avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: