项目中字体图标的使用详解

作为一名前端开发学习者,经常在项目中需要用到各种小图标,那么这些小图标其实不用我们抠出当作图片使用,现在很多UI提供很多字体图标。以阿里的图标为例。

1. 首先要去阿里巴巴图标官网下载

网址 :https://www.iconfont.cn/

进入官网后然后在搜索你需要的图标,然后点击加入购物车
项目中字体图标的使用详解

2. 下载图标

刚刚已经添加你需要的图标到购物车里面了,现在就点击进去购物车,下载图标,如下:
项目中字体图标的使用详解

3. 使用图标

下载后然后把压缩包解压,把下载的文件放在你的项目文件里面。打开你下载的文件,如下:
项目中字体图标的使用详解
然后双击打开 demo_index.html 文件,然后根据你需要的图标就可以在项目中进行使用了,具体参照下面图片中第一,二步。
项目中字体图标的使用详解