Iconfont 国内最强图标库 入门用法简介

Iconfont

官网地址:

https://www.iconfont.cn/

官方简介:

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

基本功能

项目中经常会用到一些小图标，在此之前基本都用Font Awesome。最近发现了Iconfont，不但图标更多更好看，风格统一，而且还可以只选择自己需要的图标导入项目，用法也十分简单。2分钟即可入门。

基本用法

1. 打开官网 https://www.iconfont.cn/ , 注册登录。

2. 选择自己中意的图标，加入 [购物车]。

   
   

3. 打开右边的 [购物车] ，选择下载代码。

   
   

4. 解压缩下载到的文件

   
   

5. 打开 [demo_index.html] , 可以看到官方已经给出了3种用法的demo

   
   
6. 这里推荐使用方式2 [Font class] ， 也就是只需要引入一个css文件即可安装成功。

例子如下：
第一步：引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="./iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon--xxx"></span>

至此就安装成功了，无需其他操作。

---

最后贴一下我在项目中的效果图

项目

极简插件: https://chrome.zzzmh.cn/

代码

<a href="#ext"><span class="iconfont icon-all menu-tag"></span>全部</a>

效果

END