添加阿里云矢量图标

1.先登录阿里云矢量图标官网挑选喜欢的图标。www.iconfont.cn

  • 把喜欢的图标添加至购物车。
  • 把图标添加至项目里面,如还没项目,自己创建一个项目

2.进入项目里面选择已添加的图标。

这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与上面两种相比具有如下特点:

  • 支持多色图标了,不再受单色限制。
  • 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。
  • 兼容性较差,支持 ie9+,及现代浏览器。
  • 浏览器渲染svg的性能一般,还不如png。

使用方法:

第一步:拷贝项目下面生成的symbol代码:

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js (该代码是随机生成的,复制自己生成的代码即可)
  • 把该代码复制到博客主题footer.php文件底部
图片[1]-添加阿里云矢量图标-个人学习时光

第二步:加入通用css代码(引入一次就行):

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>
  • 如果该代码在CSS里没有被调用,可以把代码添加至博客额外CSS里面
  • 这段代码是控制图标大小
图片[2]-添加阿里云矢量图标-个人学习时光

第三步:挑选相应图标并获取类名,应用于页面:

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>
  • 把该代码复制到博客-外观-菜单-子菜单的导航标签里面。
  • 注意,icon-xx,这个代码是你阿里云矢量图标网自动生成的。
图片[3]-添加阿里云矢量图标-个人学习时光
图片[4]-添加阿里云矢量图标-个人学习时光

到这里,博客上就出现小图标,如图:

图片[5]-添加阿里云矢量图标-个人学习时光

如果有什么不明白的可以留言,看到会回复。

© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片