阿里巴巴iconfont正确的使用姿势

5.png

以前一直用的是fontawesome字体,一直也就用它,觉得还比较齐全,偶尔有需要用到其他图标的时候,就会用阿里巴巴iconfont,在上面选择一个合适的图标下载一个png或者svg格式,如下图,单独引入也就是了。今天好好看了一下,发现以前真的是小看了这个字体库。

6.png

平时都是一个个下,如果要用一批里面的字体该如何做呢?follow me!

下载

进入官网,选择你需要的图标,“添加入库”
1.png
选择完毕后,点击上方的购物车图标
2.png
再点击“下载代码”即可
3.png
下载下来的如图
4.png

使用

其实下载的文件中包含了那个demo html文件,分别介绍了三种使用方式,阅读即可明白使用方法,讲的很清楚。

  • symbol引用 :支持ie9+,可以使用彩色图标
  • font-class 引用 :兼容性不错,支持ie8+,书写直观(这点很不错),不过本质还是字体,所以只能是单色图标,推荐
  • unicode 引用 :兼容性最好(支持ie6+),其他都比不上font-class。

这里还是贴一下使用方式吧

font-class引用

使用步骤如下:

第一步:引入项目下面生成的fontclass代码:

1
<link rel="stylesheet" type="text/css" href="./iconfont.css">

这里对应的font文件还是要和css放在同一目录

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

symbol引用

使用步骤如下:

第一步:引入项目下面生成的symbol代码:

1
<script src="./iconfont.js"></script>

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

1
2
3
4
5
6
7
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}


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

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

unicode引用

第一步:拷贝项目下面生成的font-face

1
2
3
4
5
6
7
8
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}

第二步:定义使用iconfont的样式

1
2
3
4
5
6
7
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}

第三步:挑选相应图标并获取字体编码,应用于页面

1
<i class="iconfont">&#x33;</i>