阿里巴巴iconfont圖示庫的完美使用
摘要：
最近在找一些圖示，最後發現阿里的圖示庫是用的最順手的，也是上手最容易的。
讓我們開啟iconfont的網站http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2，有興趣的同學或者正在尋找圖示庫的同學，可以進去看看。 ...
最近在找一些圖示，最後發現阿里的圖示庫是用的最順手的，也是上手最容易的。
讓我們開啟iconfont的網站http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2，有興趣的同學或者正在尋找圖示庫的同學，可以進去看看。
現在進行圖示的使用。有2種使用方式：
一、直接下載，以圖片的形式引入頁面中。
二、加入自己的專案，引用iconfont的程式碼
如果是選擇這種方式，首先加入購物車，然後新增至自己的專案中
如果是加入自己專案這種方式，那有3種方式引入1、unicode 2、font class 3、symbal
1、以unicode方式引入，因為是以unicode方式引入的，所以從程式碼上看不出引入的是什麼，語義不明確，且不支援多色圖示
第一步：拷貝專案下面生成的font-face
@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的樣式
.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;}
第三步：挑選相應圖示並獲取字型編碼
<i class="iconfont">3</i>
2、以font-class方式引入，從程式碼上明確知道引入的是什麼圖示，若要修改只修改clss即可，相容性好
第一步：直接拷貝專案生成的fontclass程式碼
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
第二步：挑選相應圖示
<i class="iconfont icon-xxx"></i>
3、以symbal方式引入，做了一個svg的集合，支援多色圖示，但是相容性差
第一步：拷貝專案下面生成的symbol程式碼
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
第二步：加入通用的css程式碼
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步：挑選相應圖示
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>