PC端使用iconfont图标

时间 2019-11-20

标签使用 iconfont 图标繁體版

原文原文链接

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

第一步：下载html

讲本身须要的图标（能够经过搜索查找）添加到暂存驾，之前是购物车！而后点下载或者存储到CDN。chrome

这个图是偷的：svg

第二步：看看url

下载后大概是这个样子：spa

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

3、使用：code

字符实体方式：orm

HTML:htm

<!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>

这就够了！