一、引用线上图标库
1.登录阿里巴巴矢量图标库（可以微博登录），鼠标悬停在需要的图标，点击收藏入库（购物车图标），点击下载到本地或添加到项目
2.在页面中使用
<head> <meta charset="UTF-8"> <title></title> <style>
// 引用线上的图标库
@font-face { font-family: 'iconfont'; /* project id 238765 */ src: url('//at.alicdn.com/t/font_pzihjs6e7ki6bt9.eot'); src: url('//at.alicdn.com/t/font_pzihjs6e7ki6bt9.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_pzihjs6e7ki6bt9.woff') format('woff'), url('//at.alicdn.com/t/font_pzihjs6e7ki6bt9.ttf') format('truetype'), url('//at.alicdn.com/t/font_pzihjs6e7ki6bt9.svg#iconfont') format('svg'); }
//图标样式 .iconfont { font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style> </head> <body> <i class="iconfont"></i> <!--是图标代号--> <i class="iconfont"></i> <i class="iconfont" style="font-size:16px; color:#F5425F;"></i> </body>
3.本地使用
@font-face {
font-family:myFont666; //自定义命名
src: url('iconfont.ttf'), //这个路径为本地的相对路径，即该字体文件与html的路径
url('iconfont.svg'),
url('iconfont.woff'),
url('iconfont.eot');
}
.myiconfont {
font-family:"myFont666" !important; //名字一致
font-size:50px;
font-style:normal;
color:#ccc;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
<i class="myiconfont"></i>
<i class="myiconfont"></i>
<i class="myiconfont" style="font-size:16px; color:#F5425F;"></i>
</body>