网页中使用阿里图标iconfont

最新推荐文章于 2024-08-29 14:44:16 发布

极客研究者

最新推荐文章于 2024-08-29 14:44:16 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签： css html css3

本文链接：https://blog.csdn.net/qq_34550459/article/details/105361738

版权

前端专栏收录该内容

18 篇文章

订阅专栏

iconfont:是由阿里提供的图标库,开发者可以使用,这里可能会涉及到版权问题。
商用的话,最好与作者联系沟通一下。
Address:iconfont

进入页面后,选择你想要的图标,然后加入到购物车:
在这里插入图片描述

点击右上角购物车: 将图标添加到项目:
会自动跳到我的项目:
在这里插入图片描述
下载完解压缩后:

我这里使用VS CODE演示,新建一个文件夹iconfont,把所有文件复制到此中,删掉两个demo文件:

注意: 在 demo_index.html 有你所下载图标的使用方法以及图标的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--引入样式表 -->
    <link rel="stylesheet" href="../../../iconfont/iconfont.css">
    <title>使用阿里的iconfont类库的图标</title>
    <style>
      /*
      从iconfont下载的灰色图标属于图标字体,我们可以使用CSS设置字体的样式,比较灵活
      */
      
      /* 设置图标字体的样式 */
      i.iconfont.icon-laji1{
          font-size:100px;
          color: rgb(3, 202, 3);
      }

      i.iconfont{
          font-size:200px;
          color: greenyellow;
      }
    </style>
</head>
<body>
        <!--字体类引入方式: -->
        <i class="iconfont icon-laji1"></i>

        <!--Unicode编码引入的方式 -->
        <i class="iconfont">&#xe6d6</i>
</body>
</html>

显示效果：

在这里插入图片描述