把需要的图标加入购物车，然后加入项目
打开我的项目，生成代码
有3中方式使用图标
unicode和font class本质都是使用字体，好处在于兼容性好，可以像使用字体一样定义大小、颜色（单色），加粗，阴影等，不足在于不能使用多色图标（引用的多色图标也会变单色）
symbol：svg格式（xml描述的图片）图标，可以使用多色图标，兼容性现代浏览器
- unicode方式
复制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标签可以用其他标签替代，比如span，p（会换行）
class的名字可以自己定义
--图标的unicode标志
- 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" href="http://at.alicdn.com/t/font_1303894_e6bbqut2108.css"> <title>Document</title> </head> <style> </style> <body> <i class="iconfont icon-chengshi"></i> </body> </html>
iconfont一定要加上，且名字不能变
icon-chengshi是图标对应的名字，要跟图标对应
- 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>