字体图标的用法(超详细哦)-我的前端笔记在网页中我们经常能看到一些小图标以字体的方式使用，这篇文章将会讲述如何使用字体图

在网页中我们经常能看到一些小图标以字体的方式使用，这篇文章将会讲述如何使用字体图标。首先我们要去找字体图标推荐两个网站:

www.iconfont.cn/
icomoon.io/ 我拿iconfont示范
调用字体图标有两个方法（我自己所知道的方法，可能还有更多哈）
使用方式：unicode、Font-class
通过本地引入
用法：
1.进入网站找到需要的图标（推荐在官方素材库里面挑选）
如图： 2.挑选合适的图标加入购物车里面
如图： 3.在购物车里面将图标添加至项目文件夹（没有的话新建一个）

4.下载字体图标(下载完成后会得到一个压缩包解压出来)
如图：

5.将文件夹放到我们项目根目录引入里面的iconfont.css调用即可
如图：

找到需要使用的图标复制代码即可（可以在网站上看图标代码也可在文件夹中的demo.html查看哦）
unicode调用需要给标签设置字体，Font-class直接调用类名即可（具体看代码示例）
如图：
unicode代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入字体图标样式 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        /* 2.设置字体 */
        span {
            font-family: "iconfont";

        }

        /* 4.字体图标可随意改变颜色和大小 */
        .son {
            font-size: 110px;
            color: aquamarine;
        }
    </style>
</head>

<body>
    <!-- 3.使用字体图标（图标代码从iconfont网站上对应图标复制） -->
    <span class="son">&#xe8bd;</span>
</body>

</html>

Font-class代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入iconfont样式文件 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        .s1 {
            color: red;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <!-- 2.调用字体类名 -->
    <span class="iconfont icon-shouji s1"></span>
</body>

</html>

在线引入方式
只需要把css引入本地的改成在线链接即可（前面记得加上 "https://" 不加有可能读取不到）
如图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3243725_l9i5kh5wis.css?spm=a313x.7781069.1998910419.81&file=font_3243725_l9i5kh5wis.css">
</head>

<body>
    <div class="box">
        <i class="iconfont icon-cart-full buy"></i><span>购物车</span><i class="iconfont icon-arrow-down"></i>
    </div>
</body>

</html>

练手小案例：
效果图：

案例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        body {
            text-align: center;
        }

        .box {
            display: inline;

            border: 1px solid #333;
        }

        .buy {
            color: orange;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="box">
        <i class="iconfont icon-cart-full buy"></i><span>购物车</span><i class="iconfont icon-arrow-down"></i>
    </div>
</body>

</html>