设计 css

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

Posted on 2017-07-27 |    

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

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

下载

进入官网，选择你需要的图标，“添加入库”

选择完毕后，点击上方的购物车图标

再点击“下载代码”即可

下载下来的如图

使用

其实下载的文件中包含了那个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>
FEATURED TAGS
设计 css