登錄https://www.iconfont.cn
把需要的圖標(biāo)加入購(gòu)物車，然后加入項(xiàng)目
打開我的項(xiàng)目，生成代碼
有3中方式使用圖標(biāo)
unicode和font class本質(zhì)都是使用字體，好處在于兼容性好，可以像使用字體一樣定義大小、顏色（單色），加粗，陰影等，不足在于不能使用多色圖標(biāo)（引用的多色圖標(biāo)也會(huì)變單色）
symbol：svg格式（xml描述的圖片）圖標(biāo)，可以使用多色圖標(biāo)，兼容性現(xiàn)代瀏覽器unicode方式
復(fù)制unicode的代碼到模板代碼的樣式中，注意//前面加http:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
@font-face {
font-family: 'iconfont';
/* project id 1303894 */
src: url('http://at.alicdn.com/t/font_1303894_e6bbqut2108.eot');
src: url('http://at.alicdn.com/t/font_1303894_e6bbqut2108.eot?#iefix') format('embedded-opentype'), url('http://at.alicdn.com/t/font_1303894_e6bbqut2108.woff2') format('woff2'), url('http://at.alicdn.com/t/font_1303894_e6bbqut2108.woff') format('woff'), url('http://at.alicdn.com/t/font_1303894_e6bbqut2108.ttf') format('truetype'), url('http://at.alicdn.com/t/font_1303894_e6bbqut2108.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
}
</style>
<body>
<i class="iconfont"></i>
</body>
</html>
<i class="iconfont"></i>
i標(biāo)簽可以用其他標(biāo)簽替代，比如span，p（會(huì)換行）
class的名字可以自己定義
--圖標(biāo)的unicode標(biāo)志
- font class方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" >
<title>Document</title>
</head>
<style>
</style>
<body>
<i class="iconfont icon-chengshi"></i>
</body>
</html>
iconfont一定要加上，且名字不能變
icon-chengshi是圖標(biāo)對(duì)應(yīng)的名字，要跟圖標(biāo)對(duì)應(yīng)
- symbol
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="http://at.alicdn.com/t/font_1303894_e6bbqut2108.js"></script>
<title>Document</title>
</head>
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-draw"></use>
</svg>
</body>
</html>
