字体图标引入方式，基本使用的方法

摸鱼小队

已于 2022-07-19 01:11:56 修改

阅读量1.2k

点赞数 2

文章标签： html css

于 2022-07-17 20:54:13 首次发布

本文链接：https://blog.csdn.net/m0_46324704/article/details/125836355

版权

通过本地下载字体图标包引入

在html中通过link引入iconfont.css文件

第一种使用方式，Unicode方法，

给标签的添加固定的class类名iconfont。然后再双标签内输入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>
    <!-- 引入字体css文件 -->
    <link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
    <!-- 标签固定类名，然后内容使用对应字体图标的Unicode码 -->
    <i class="iconfont">&#xe6ef;</i>
    <i class="iconfont">&#xe6f0;</i>
    <i class="iconfont">&#xe742;</i>
    <i class="iconfont">&#xe747;</i>
</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>
    <!-- 引入字体图标css文件 -->
    <link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
    <!-- 在字体图标固定类名后面 加上字体图标的类名 -->
    <i class="iconfont icon-add-cart"></i>
    <i class="iconfont icon-all"></i>
    <i class="iconfont icon-bussiness-man"></i>
    <i class="iconfont icon-category"></i>
</body>
</html>

第三种使用方式，使用伪元素

给标签设置字体图标固定类名，然后通过css设置该标签的伪元素内容来实现字体图标效果（可以查看字体图标的css文件设置方式）
字体图标文件

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('iconfont.ttf') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-all:before {
  content: "\e6ef";
}

.icon-bussiness-man:before {
  content: "\e6f0";
}

.icon-add-cart:before {
  content: "\e742";
}

.icon-category:before {
  content: "\e747";
}

伪元素content属性设置对应的图标

<!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>
    <!-- 引入字体图标css文件 -->
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        /* 设置i标签的伪类 */
        i::after{
            content: "\e6ef";
        }
    </style>
</head>
<body>
    <i class="iconfont"></i>
</html>