博客

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

  • Post author:
  • Post category:其他



目录


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


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


第二种使用方式，直接使用类名


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


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

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


版权声明：本文为m0_46324704原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。