2021 年 Web 开发常用的五个图标库（建议收藏）

• 你可以找到任意颜色、大小和格式的图标。

• 有不同的图标样式可供选择。(填充图标、线条图标、实心图标等。)

• 免费增值服务。从 13 美元起，有不同的图标、照片、插图供你选择。

• 免费套餐包括可达 100 像素的 PNG 图标，你需要更改为付费套餐才能下载其他格式。

缺点

• 需要注册才能下载图标。

• 在下载图标并在项目中使用它们之前，你必须仔细检查，因为有些图标需要注明出处。

2. Flaticon

---

img

Flaticon 是另一个有名的图标库，我们可以将其用于 UI 设计，它以免费和高级软件包的形式提供了超过 200 万个不同的图标。像 Icons8 一样，你可以在下载之前编辑 Flaticon 图标。但是，Flaticon 不提供像 Icons8 那样丰富的编辑选项。

另一方面，你可以下载分辨率可达 512 像素的 PNG 版本图标。如前所述，Flaticon 还分为免费和付费版本，用户可以在付费版本中使用大量更高级的图标。

如果你是 Flaticon 的游客用户，你只能创建一个收藏，并且每天只能下载 10 个图标。你可以通过在 Flaticon 注册，每天最多扩展到 3 个收藏和下载 100 个图标，而不会产生任何费用。最重要的是，他们的高级版本允许你创建无限的图标集合，每天下载 2000 个图标。 

Flaticon 的主要特点

• 提供 SVG、EPS、PSD、BASE 64 和 PNG 格式。

• 为 Adobe 的创意云套件（CC）提供了扩展。（校对者注：目前并没有搜索到相关扩展，官网链接已失效，可能是该扩展已下架）

• 能在下载之前进行自定义图标设计。

• 高级套餐的价格为每月 9.99 欧元。

• 高级套装提供无限数量的图标，包括三百万多个高级图标的集合。

• 可以在 GSuite 应用程序中直接使用 Flaticon 图标。

• 可以使用 Flaticon 为演示文稿、故事、博客和网站创建背景图像。

缺点

• 使用免费版本时需要提供注明出处。

3. Font Awesome

---

img

Font Awesome 是开发者常用的另一个流行图标库，主要是因为它直接支持 Bootstrap 和 CSS。然而，Font Awesome 图标比 Icons8 和 Flaticon 少。因为 Font Awesome 是 Bootstrap CSS 框架中使用的默认图标集，它成为了任何使用 Bootstrap 开发项目的默认选择。

如果深入探究会发现，Font Awesome 中有两个库，分别为免费版和专业版。免费版仅包含 1,598 个图标，而专业版包含额外的 6,250 个图标和其他功能。

顾名思义，Font Awesome 使用字体而不是图像，因此在免费版和专业版中，它都提供了像素完美的图标，简单的 CSS 样式，托管的工具包，强大的转换以及轻松的升级。Font Awesome 没有提供 Icon8 或 Flaticoin 之类的编辑选项，但为你提供了 CSS 类，可以直接在 HTML 中定义使用。

使用免费版，你只能下载所选择图标的完整版本，如果你希望使用 Regular、Light 或 Duotone 等字体，则需要切换到专业版。 

Font Awesome 的主要特点

• 从 Font Awesome 3.0 版本开始，不再需要注明出处。

• 支持 CSS 和 Bootstrap。

• 提供 CSS 类，Unicode 和 SVG 格式的图标。

• 可以使用纯 CSS 直接更改图标的基本属性（颜色、阴影、背景等）。

• 可以轻松升级到最新版本。

• Font Awesome 全局 CDN 和缓存可用于更快地加载图标。

• 专业版价格为每年 99 美元，包括自定义设置，人工技术支持，专业版下载，标准专业证书和其他功能。

4. Fontisto

---

img

与我们讨论的前三个图标包不同，Fontisto 是一个完全免费的矢量图标库，你可以将其用于项目开发和设计目的。你只需从它网站点击几下就可以定制图标。添加旋转效果、动画、边框等简单的修改，你可以用字体来完成。你也可以下载图标的 CSS 类。由于 Fontisto 支持 CSS，所以可以直接对图标的 CSS 属性进行修改，包括图标大小、颜色、背景等。

除此之外，Fontsto 提供了几种方法来开始项目，比如使用 CDN，通过将整个 Fontsto 目录复制到项目中来直接使用 CSS。你可以使用包管理器，如 npm、yarn 或者 bower 等。使用以下命令：

使用 Fontisto CDN：

复制代码

使用 CSS：

                                                             

 

复制代码

使用包管理：

npm install fontisto                    // npm

yarn add fontisto                       // yarn

bower install fontisto                  // bower

composer require kenangundogan/fontisto // composer

复制代码

Fontisto 的主要特点

• 完全免费用于商业用途。

• 不需要使用 Javascript。

• 支持使用 CSS。

• 完美适配高分辨率显示器。

• 图标是可伸缩的。

自学几个月前端，为什么感觉什么都没学到？？

---

这种现象在很多的初学者和自学前端的同学中是比较的常见的。

因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。

最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。

很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。

这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。

但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。

还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。

所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。