[elementUI] icon 的正常使用方式
直接引用官方自帶的圖標字體 （類名為全名）
ex:
<i class="el-icon-edit"></i>
一些含有 icon屬性的元素引用 （類名為去掉名前綴 el-icon的名字）
ex:
<el-button type="primary" icon="edit">搜索</el-button>
引入第三方圖標字體
這里先直接把文檔粘過來
文檔中舉了兩個栗子
第一個栗子 是引用 font-awesome 的栗子 並提供了[demo](https://github.com/ElementUI/element-font-awesome）
其實就兩個地方要注意的，第一個自定義一個css,定義好前綴，注意前綴一定要是el-icon開頭，修改所有符合這個類名規則的 font-family 為FontAwesome
[class^="el-icon-fa"], [class*=" el-icon-fa"] {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome!important;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
};
@import url("../node_modules/font-awesome/less/font-awesome");
@fa-css-prefix: el-icon-fa;
引用適合同樣遵循開始說的全名和 非全名的規則
<div id="app">
<i class="el-icon-fa-car"></i>
<el-input icon="fa-address-book" style="width: 200px"></el-input>
</div>
第二個栗子 是引用阿里 icon-font的栗子 沒有提供栗子，所以下面是我們自己寫的栗子
首先在阿里 官網選好自己需要的圖標 並加入項目
然后批量編輯項目，修改類名前綴為el-icon-my
完成之后下載到本地 你會發現這樣的目錄結構，其中iconfont.css 是我們需要打開參考的，（這里必須提一句 阿里這個栗子做的果然很人性化，贊一個）
將文件夾下四種字體和style.css拷貝到項目目錄下，並在main.js種引入 大功告成
ps: 這里補充一個小問題就是如果你多次加入、修改字體后，記得要把鏈接字體的url重新拷貝，因為每次變化，字體的后綴md5會變化，保證你加載的最新字體，如果你偷懶用之前的，只是更換了字體
而沒有換鏈接 那么游覽器就會用緩存的字體 造成修改無效的假象
本來本文關於elementui圖標字體使用已經介紹完了，下面 單獨針對 阿里的 iconfont 說一下
其實就是三種圖標使用方式對比， 1 unicode 2 iconfont 3 symbol ， .http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.13&helptype=code
unicode 已經明顯過時了 此處不再多說，他完全被iconfont取代了，
iconfont的特點是
symbol 主要是可以用多種顏色了，而且 是一個真正的元素 定位什么的也很方便，而圖標字體定位起來則需要各種linehight 等方式，相對麻煩， 所以symbol 才是未來
