【前端-网页篇】HTML中如何显示iconfont图标_html icon图标

作者：花生_TL007 | 2024-02-19 09:32:56

踩

html icon图标

进入iconfont界面

在这里插入图片描述
找到你想要的图片，点击进入

找到图标后加入这个购物车，点击右上角的购物车，添加到项目中

在这里插入图片描述
添加完成后进入我的项目中查看所添加的图标，选择下载到本地

下载的文件内容如下图所示，将这些文件放到你的WEB目录下

我这边创建了css文件夹和iconfont文件夹，以及一个HTML文件，等下用于网页显示刚才收藏的图标
在这里插入图片描述
将刚才下载的那几个文件放到iconfont文件夹中

可以用浏览器打开demo_index.html，里面有使用的教程

先在css文件夹中创建一个.css的文件，并把demo中以下两端代码复制到创建的文件中，并修改路径
在这里插入图片描述
并修改代码中的路径(为你存放iconfont中下载的几个文件路径)

@font-face {
    font-family: 'iconfont';
    src: url('../iconfont/iconfont.woff2?t=1627833848865') format('woff2'),
         url('../iconfont/iconfont.woff?t=1627833848865') format('woff'),
         url('../iconfont/iconfont.ttf?t=1627833848865') format('truetype');
  }

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

HTML代码如下

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet"  type="text/css"  href="css/picture.css">
    <script src="./iconfont/iconfont.js"></script>
</head>

<body>

    <span class="iconfont">&#xe60a;</span>
    <span class="iconfont">&#xe60b;</span>
    <span class="iconfont">&#xe60c;</span>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

上面的编码是demo中获取
在这里插入图片描述

效果如下:iconfont中的图标显示在网页中
在这里插入图片描述
目前只有黑白两种颜色，那怎么显示彩色呢

选择demo.index中的symbol查看教程
在这里插入图片描述
实现以下三步就可以实现

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet"  type="text/css"  href="css/picture.css">
    <script src="./iconfont/iconfont.js"></script>

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


</head>
<body>

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

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


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


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

在这里插入图片描述
最终效果如下图所示

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