iconfont的使用(超简单)
- 1、iconfont 是什么?
- 2、使用
- 2.1、新建项目
- 2.2、搜图标 添加 至项目中
- 2.3、下载iconfont的包文件![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/91a0a07cd4b74798b7fb333dddca7724.png)
- 2.4、画一个文件夹图标
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>
图标