在vscode中使用iconfont阿里字体图标

最新推荐文章于 2024-05-13 09:50:59 发布

Mengxy灬

最新推荐文章于 2024-05-13 09:50:59 发布

阅读量2.1k

点赞数

文章标签：前端 html5 vscode

本文链接：https://blog.csdn.net/qq_47548037/article/details/124624315

版权

1.登录阿里巴巴矢量图标库

iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/

首页：

2.从中选择你喜欢的图标库

3. 点击加入购物车，在购物车中可以查看自己想要的图标

4.下一步点击添加至项目，给你想要的图标加入项目并取一个喜欢的项目名字

5.直接点击下载至本地，下载完成后解压缩(最好将该文件夹重命名一下，写代码的时候比较好用，我这里重命名为word)并将文件夹放入vscode中你要使用的文件夹下。

可以看到iconfont.css，这是我们需要引入的css

并且右键demo_index.html在浏览器中打开

特别提醒：在web端使用字体图标部分图标可能出现错误，一般使用Fontclass方式是最简单的，也是官方推荐的，图一三种引入方式全部支持，图二只支持Symbol方式，其他引用方式会出现图标变黑，根据实际需求变换引入方式。

Symbol方式没错，彩色图标

Font class出错，图标变成黑色

使用link标签引入
 <link rel="stylesheet" href="word/iconfont.css">

6.(1)建议使用Font class方式引入方便，这里第一种先展示Font class方法。

<!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>
    <link rel="stylesheet" href="download/test_font/iconfont.css" />
    <style>
      span.icon-buganxingqu {
        font-size: 100px;
        color: red;
      }
      span.icon-dingwei {
        font-size: 100px;
        color: blue;
      }
      span.icon-caidan {
        font-size: 100px;
        color: greenyellow;
      }
    </style>
  </head>
  <body>
    <span class="iconfont icon-buganxingqu">爱心图标</span><br />
    <span class="iconfont icon-dingwei">定位图标</span><br />
    <span class="iconfont icon-caidan">egg</span><br />
    <span class="iconfont icon-ditu"></span><br />
    <span class="iconfont icon-bofangjilu"></span>
  </body>
</html>

此时图标就相当于文本，可以设置大小font-size，还可以设置颜色

可以看到和文字一样

6.(2)使用Symbol引入比较麻烦不建议使用

<!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>
    <link rel="stylesheet" href="test/iconfont.css" />
    <style>
      .icon {
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <script src="test/iconfont.js"></script>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-liuyanban"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-zijin"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-shangcheng"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-anquan"></use>
    </svg>
  </body>
</html>

Mengxy灬

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
在vscode中使用iconfont阿里字体图标

1.登录阿里巴巴矢量图标库iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/首页：2.从中选择你喜欢的图标库3. 点击加入购物车，在购物车中可以查看自己想要的图标4.下一步点击添加至项目，给你想要的图标加入项目并取一个喜欢的项目名字5.直接点击下载至本地，下载完成后解压缩...
复制链接

扫一扫