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