HTML + CSS 连载 | 42 - 字体图标_html 字体图标

作者：2023面试高手 | 2024-02-19 09:46:27

踩

html 字体图标

html+css.jpeg

一、字体图标

字体可以设计成各种各样的形状，当然也可以直接将字体设置成图标来使用，这就是字体图标。

字体图标在放大时不会失真，并且可以随意切换颜色，在用到很多个图标时，文件相对图片较小。

阿里icons 网站上提供了非常多的图标可供下载，使用时只需要将喜欢的图标添加到购物车，并从侧边栏打开购物车选择下载代码按钮来下载字体图标相关的压缩文件。

将下载好的压缩文件解压，并文件夹中的 iconfont.ttf 文件拷贝到项目目录的 fonts 目录下，创建 HTML 页面，在该页面中引入下载好的字体图标，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /*引入字体图标*/ 
    @font-face {
      font-family: "iconfont";
      src: url("./fonts/iconfont.ttf");
    }

    i {
      font-family: "iconfont";
    }
  </style>
</head>
<body>
  <i>字体图标</i>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在 LiverServer 中打开 HTML 页面，效果如下：

如果想要显示图标，我们可以打开解压文件夹中的 demo.html 文件，该文件中显示了我们应该如何使用这个字体图标：

修改我们自己写的 HTML 页面，将 i 元素中的文字内容替换为具体的图标编号，代码如下所示：

<i>&#xe69a;</i>
1

刷新页面，效果如下：

图标显示出来了，但是是斜体的，并且非常小，我们可以像设置字体一样设置字图标，添加如下 CSS 字体样式设置的代码：

i {
  font-family: "iconfont";
  font-style: normal;
  font-size: 100px;
}
1
2
3
4
5

刷新页面，效果如下：

但是这种设置样式的方式是对页面所有的图标进行设置，在开发中更常用的方式是给 i 元素一个 class 属性，通过 class 属性设置不同位置的图标的样式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @font-face {
      font-family: "iconfont";
      src: url("./fonts/iconfont.ttf");
    }

    .iconfont {
      font-family: "iconfont";
      font-style: normal;
      font-size: 100px;
    }

    .icon {
      font-family: "iconfont";
      font-size: 200px;
      display: inline-block;
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <i class="iconfont">&#xe69a;</i>
  <i class="iconfont">&#xe62f;</i>

  <i class="icon">&#xe69a;</i>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

刷新页面，效果如下：

另外我们在每一次使用图标的时候都要去复制这个图标的编码，这非常的不方便，那么其实我们可以不使用字符实体的方式把字体图标展示出来。

打开字体文件夹中的 iconfont.css 文件，该文件中已经为我们设置好了字体图标的样式，如下图所示：

我们可以将如下代码拷贝到我们的项目文件中

.icon-huojian::before {
  content: "\e69a";
}
1
2
3

之后我们如果想要在使用图标，就可以直接通过添加 class 属性的方式来引入图标了

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @font-face {
      font-family: "iconfont";
      src: url("./fonts/iconfont.ttf");
    }

    .iconfont {
      font-family: "iconfont";
      font-style: normal;
      font-size: 100px;
    }

    .icon {
      font-family: "iconfont";
      font-size: 200px;
      display: inline-block;
      width: 200px;
      height: 200px;
    }

    .icon-huojian::before {
      content: "\e69a";
    }
  </style>
</head>
<body>
  <i class="iconfont">&#xe69a;</i>
  <i class="iconfont">&#xe62f;</i>

  <i class="icon">&#xe69a;</i>

  <!-- 不使用字符实体的方式展示出来，直接引入两个 class，一个是图标，一个是图标样式 -->
  <i class="iconfont rockets"></i>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

使用 LiverServer 打开 HTML 页面，效果如下：

在以后的开发中我们可以直接将 iconfont.css 文件通过 link 元素引入到 HTML 页面中，想要使用什么图标就可以直接通过添加 class 属性的方式来实现了。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/114014