使用阿里巴巴矢量彩色图标库教程

2022年12 月13日 / 网站源码 / 没有评论 / 4,840次

之前写过《阿里巴巴图标库使用方法》,该方法是针对线性图标的方法,但是如果需要使用到漂亮的彩色图标,那么得使用一下方法了,以QQ彩色图标为例:

一、选择和添加彩色图标

二、点击图标上的编辑修改图标重命名,以防和其他线性等图标重名

三、下载压缩包到后传到主题目录下,

四、拷贝项目下面生成的 @font-face放到需要显示的页面下:

  1. <style>
  2. @font-face {
  3.   font-family: 'iconfont';
  4.   srcurl('iconfont.woff2?t=1670820180463') format('woff2'),
  5.        url('iconfont.woff?t=1670820180463') format('woff'),
  6.        url('iconfont.ttf?t=1670820180463') format('truetype');
  7. }
  8. </style>

五、定义使用 iconfont 的样式(没有需求可不管)

  1. <style>
  2. .iconfont {
  3.   font-family"iconfont" !important;
  4.   font-size16px;
  5.   font-stylenormal;
  6.   -webkit-font-smoothing: antialiased;
  7.   -moz-osx-font-smoothing: grayscale;
  8. }
  9. </style>

六、挑选相应图标并获取字体编码,应用于页面,其中icon-QQcolor为前面阿里图标里自定义的名称:

  1. <svg class="icon" aria-hidden="true"><use xlink:href="#icon-QQcolor"></use></svg>

效果如我文章页面后面打赏QQ小图标。