web icon-font的使用方法
2017-08-24 本文已影响0人
_沉默的疯子
这里使用的图标库是 Iconfont-阿里巴巴矢量图标库
1.选择中意的图标 选择 添加入库（可以选择N个）
捕获.JPG
-
点击 右上角购物车图标， 选择下载代码（download.zip）。
-
解压 download.zip 后是一个 demo， 把 iconfont.css , iconfont.eot , iconfont.js , iconfont.svg, iconfont.ttf , iconfont.woff，放到你自己的目录。
捕获.JPG
-
打开 iconfont.css, 可以看到 图标名称
TIM截图20170824153508.png
- 测试代码
<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="iconfont.css">
<link rel="stylesheet" href="test.css">
<title>Document</title>
</head>
<body>
<i class="icon iconfont icon-shenfenzheng"></i>
<i class="icon iconfont icon-fenlei"></i>
</body>
</html>
注意：如果要更改图标大小，要用 font-size
