阿里巴巴iconfont字体图标库的使用

iconfont使用方法：

在这里先说一下原理吧！ iconfont字体图标是通过伪元素，在伪元素content里面设置Unicode编码来实现的 由此可见：

我们并未给span标签设置伪元素，它却自己有了一个伪元素，而伪元素的content属性里面正是Unicode编码。

下面来介绍一下使用方式： 首先：进入网站-->www.iconfont.cn/ ， 找到想要的图标，添加至购物车，然后 下载代码，此时会看的一个名为 download的压缩包，解压，命名为iconfont（其实什么都可以，为了尊重开发者吧，哈哈哈）。准备好这一切后，看下面吧！

1、Unicode使用：

<link rel="stylesheet" href="./iconfont/iconfont.css">/* 引入字体图标样式 */
  <style>
    span {
        /* 设置字体图标 */
      font-family: iconfont;
        /* 设置字体图标大小*/
      font-size: 50px;
    }
    .i1 {
        /* 设置字体颜色 */
      color: red;
    }
  </style>
    /* 复制Unicode代码 */
  <span class="i1">&#xe882;</span>
  <span>&#xe884;</span>
​

2、Font-class使用:

<link rel="stylesheet" href="./iconfont/iconfont.css">
  <style>
    .s1 {
      color: salmon;
      font-size: 40px;
    }
  </style>
/* 
第一个类名固定的：iconfont  
第二个类名：通过html文件，直接去复制文字下方的类名即可 
*/
  <span class="iconfont icon-shangpin-xianxing"></span>
  <span class="iconfont icon-zhongzhuanzhan-xianxing s1"></span>

3、搭配伪元素使用：

<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
​
    span::before {
      /* 设置字体图标库 */
      font-family: iconfont;
      /* 设置字体代码  &#xe600; --->  \e600; */
      content: "\e600";
      color: orangered;
    }
    span::after {
      font-family: iconfont;
      content: "\e60b";
    }
​
  <div class="cart">
    <span>购物车</span>
  </div>

如果不想下载，可以添加至项目后，在线使用！

4、在线引入使用:

<!-- 在线引入字体图标，注意前面要加http: -->
<link rel="stylesheet  href="http://at.alicdn.com/t/font_2970681_7my4eaeshh7.css"/>
                                                                                 
  <!-- 先写iconfont类名  再写图标类名 -->                                             
  <i class="iconfont icon-zhaoxiangji"></i>

\