字体图标的使用

为什么使用字体图标？有以下优势：
1.字体文件小，一般20-50kb
2. 容易编辑和维护，尺寸和颜色可以用css来控制
3. 透明完全兼容IE6
字体图标可以自己制作，也可以直接引用网上的字体图标库，比如阿里巴巴矢量图标库
如何引用字体图标？

1.使用font-face声明字体：

@font-face {font-family: "iconfont";
    src: url('//at.alicdn.com/t/font_m7qjx02l4zccjtt9.eot?t=1489815679778'); /* IE9*/
    src: url('//at.alicdn.com/t/font_m7qjx02l4zccjtt9.eot?t=1489815679778#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('//at.alicdn.com/t/font_m7qjx02l4zccjtt9.woff?t=1489815679778') format('woff'), /* chrome, firefox */
    url('//at.alicdn.com/t/font_m7qjx02l4zccjtt9.ttf?t=1489815679778') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('//at.alicdn.com/t/font_m7qjx02l4zccjtt9.svg?t=1489815679778#iconfont') format('svg'); /* iOS 4.1- */
}

2.icon元素上使用该字体

.iconfont {
    font-family:"iconfont" !important;
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-pinglun:before { content: "\e621"; }

.icon-jiantou-copy-copy:before { content: "\e64d"; }

.icon-fanhui:before { content: "\e600"; }

3.在页面中使用这个字体

<i class="iconfont icon-fanhui"></i>