PC端使用iconfont图标

原来看过iconfont，但是没用过，今天尝试着用了一下！看看怎么用的：

第一步：下载

讲自己需要的图标（可以通过搜索查找）添加到暂存驾，以前是购物车！然后点下载或者存储到CDN。

这个图是偷的：

PC端使用iconfont图标

第二步：看看

下载后大概是这个样子：

PC端使用iconfont图标

里面有个demo.html，打开看看，上面详细讲解了图标的class、字符实体。当然了，还有使用方法

PC端使用iconfont图标

三、使用：

字符实体方式：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div class="iconfont">&#xe641;</div>
<!-- 这里的字符实体在demo.html指出了 -->
</body>
</html>

CSS:

@font-face {
    font-family: 'iconfont';
    src: url('ux/iconfont.eot'); /* IE9*/
    src: url('ux/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('ux/iconfont.woff') format('woff'), /* chrome、firefox */
    url('ux/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('ux/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont{
    font-family:"iconfont";
    font-size:16px;
    font-style:normal;
}

class方式：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>    
    <link rel="stylesheet" type="text/css" href="ux/iconfont.css">
    <!-- 注意这里导入的是哪个css -->
</head>
<body>
<i class="icon-qq iconfont"></i>
<!-- 这里的class名在demo.html指出了，但是加上了icon-前缀 -->
</body>
</html>

这就够了！