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

被偷空的前缘

已于 2023-04-01 14:09:40 修改

阅读量4.3k

点赞数 1

分类专栏：前端-网页文章标签： css html

于 2021-08-12 23:31:46 首次发布

本文链接：https://blog.csdn.net/weixin_42857472/article/details/119655859

版权

前端-网页专栏收录该内容

4 篇文章 0 订阅

订阅专栏

进入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;
  }

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>

上面的编码是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
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端-网页篇】HTML中如何显示iconfont图标

iconfont图标显示在网页上进入iconfont界面iconfont图标库进入iconfont界面找到你想要的图片，点击进入找到图标后加入这个购物车，点击右上角的购物车，添加到项目中添加完成后进入我的项目中查看所添加的图标，选择下载到本地下载的文件内容如下图所示，将这些文件放到你的WEB目录下我这边创建了css文件夹和iconfont文件夹，以及一个HTML文件，等下用于网页显示刚才收藏的图标将刚才下载的那几个文件放到iconfont文件夹中可以用浏览器打开demo_in
复制链接

扫一扫