iconfont的使用（超简单）_iconfont如何使用-CSDN博客

本文链接：https://blog.csdn.net/qq_45432276/article/details/139735893

iconfont的使用（超简单）

1、iconfont 是什么？
2、使用

1、iconfont 是什么？

阿里iconfont图标库

iconfont是阿里打造的矢量图标管理、交流平台，设计师将图标上传到 iconfont 平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

iconfont中具有页面所需要的各种各样的图标库
直接调用，就能使用各种各样的图标

2、使用

我们可以新建一个项目然后把要使用的图标都放到这个库中方便查看使用。

2.1、新建项目

在这里插入图片描述

2.2、搜图标添加至项目中

项目创建后，我们搜索要使用的图标，然后加入到新创建的项目中
在这里插入图片描述

我们可以在项目中查看到所添加的图标

在这里插入图片描述

2.3、下载iconfont的包文件

在这里插入图片描述
解压至文件夹iconfont中

2.4、画一个文件夹图标

symbol方式画一个文件夹
在这里插入图片描述
代码


<script src="./iconfont/iconfont.js"></script>
<body>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-wenjianjia"></use>
  </svg>
</body>

图标
在这里插入图片描述

iconfont的使用（超简单）

iconfont的使用（超简单）

1、iconfont 是什么？

2、使用

2.1、新建项目

2.2、搜图标 添加 至项目中

2.3、下载iconfont的包文件

2.4、画一个文件夹图标

2.2、搜图标添加至项目中