1.Unicode
特點
- 兼容性最好，支持ie6+
- 支持按字體的方式去動態(tài)調整圖標大小，顏色等等
- 不支持多色圖標
- 在不同的設備瀏覽器字體的渲染會略有差別，在不同的瀏覽器或系統(tǒng)中對文字的渲染不同，其顯示的位置和大小可能會受到font-size、line-height、word-spacing等CSS屬性的影響，而且這種影響調整起來較為困難
使用步驟：
1.直接引用線上地址或下載至本地
image
2.復制以下代碼到index.html中，或新建一個iconfont.css文件引入
<style type="text/css">
@font-face {
font-family: 'iconfont';
/* project id 1000117 */
src: url('//at.alicdn.com/t/font_1000117_n3ngonecs7.eot');
src: url('//at.alicdn.com/t/font_1000117_n3ngonecs7.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1000117_n3ngonecs7.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1000117_n3ngonecs7.woff') format('woff'),
url('//at.alicdn.com/t/font_1000117_n3ngonecs7.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1000117_n3ngonecs7.svg#iconfont') format('svg');
}
.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;
}
</style>
3.在組件中使用
<i class="iconfont"></i>
2.Font class
特點：
- 兼容性良好，支持ie8+
- 相比于unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什么
- 不支持多色圖標
使用步驟：
1.直接引用線上地址或下載至本地
image
- 在index.html中引入
<link rel="stylesheet" type="text/css"/><!--線上（推薦開發(fā)測試用）-->
<link href="./static/iconfont.css" rel="stylesheet" type="text/css"/><!--本地（推薦項目上線用）-->
3.在組件中使用
<i class="iconfont caiseshijian"/>
3.Symbol
特點：
- 支持多色圖標，不再受單色限制
- 支持像字體那樣通過font-size,color來調整樣式
- 支持 ie9+
- 可利用CSS實現(xiàn)動畫
- 減少HTTP請求
- 矢量，縮放不失真
- 可以很精細的控制SVG圖標的每一部分
使用步驟：
1.直接引用線上地址或下載至本地
image
2.在index.html文件中引入
<script src="http://at.alicdn.com/t/font_1000117_n3ngonecs7.js"></script><!--引入線上的地址（推薦開發(fā)用）-->
<script src="./static/iconfont.js"></script><!--引入下載后的iconfont.js文件（推薦線上用）-->
- 設置通用css
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
3.在vue組件中引用,href里面的#caisenan即圖標類名
<svg class="icon" aria-hidden="true">
<use xlink:href="#caisenan"></use>
</svg>
