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

本文链接：https://blog.csdn.net/m0_57473261/article/details/136766552

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。
完美适配高分辨率显示器。
图标是可伸缩的。

你可以在项目文档中找到更多关于 Fontisto 的使用信息。

5. Streamline Icons

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。