HTML中使用IconFont图标

本博文介绍如何获得IconFont图标，以及在html中使用IconFont的3种方式。

一、获得IconFont图标

进入IconFont官网：https://www.iconfont.cn/，点击右上方人像图标登录。

选择一种快捷登录方式，这里选择Github

搜索需要的图标，例如：点赞

键入“点赞”后，回车搜索图标

鼠标移动到一个喜欢的图标上，点击购物车图标

点击右上角购物车图标，如图：

弹出如下图，点击添加至项目

写入项目名称，例如：demo，点击确定

此时看到demo项目中有我们刚刚添加到购物车的点赞图标，Iconfont的三种使用方式，分别是：Unicode、Font class、Symbol，如何使用可以点击下图右侧的"使用帮助"。

点击“暂无代码，点此生成”

生成如下在线引用代码：

点击Unicode，出现如下：

二、html中使用IconFont（3种方式）

1. Font class方式：

复制Font class的在线链接

//at.alicdn.com/t/font_1345419_2b638ugi5yd.css

html的head中引入在线链接，注意：在线链接开头需要加上http:

<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1345419_2b638ugi5yd.css">

html的body中使用点赞图标

<i class="iconfont icon-dianzan"></i>

icon-dianzhan来自于

完整代码：

fontclass.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>测试使用iconfont</title>
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1345241_ss6ikw9v16f.css">
</head>

<body>
测试Font Class方式
<i class="iconfont icon-dianzan"></i>
</body>
</html>

效果：

2.Unicode方式：

Unicode方式与Font class方式的使用方法差别不大，用fontclass.html来改一下，修改body中

<i class="iconfont">&#xe643;</i>

来自于

unicodetest.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>测试使用iconfont</title>
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1345419_2b638ugi5yd.css">
</head>

<body>
测试Unicode方式
<i class="iconfont">&#xe60c;</i>
</body>
</html>

效果：

3.Symbol方式：

复制Symbol的在线链接

引入Symbol的在线链接，注意链接开头要加上http:

<script type="text/javascript" src="http://at.alicdn.com/t/font_1345419_2b638ugi5yd.js"></script>

写icon样式

    <style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
    </style>

使用icon

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-dianzan"></use>
</svg>

完整代码：

symboltest.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>测试使用iconfont</title>
    <script type="text/javascript" src="http://at.alicdn.com/t/font_1345419_2b638ugi5yd.js"></script>
    <style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
    </style>
</head>

<body>
测试Symbol方式
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-dianzan"></use>
</svg>
</body>
</html>

效果：

完成！ enjoy it！

HTML中使用IconFont图标

本博文介绍如何获得IconFont图标，以及在html中使用IconFont的3种方式。

悦读