2021 年 Web 開發(fā)常用的五個(gè)圖標(biāo)庫（建議收藏）

點(diǎn)擊上方關(guān)注 前端技術(shù)江湖，一起學(xué)習(xí)，天天進(jìn)步

譯者：Zz招錦 https://juejin.cn/post/6922416136294252557

在過去的十年里，網(wǎng)絡(luò)和移動(dòng)應(yīng)用已經(jīng)成為我們?nèi)粘Ｉ畹囊徊糠帧Ｈ缃?，我們可以找到很多解決同一問題的應(yīng)用程序。因此，應(yīng)用程序的功能顯然不再是唯一的區(qū)別。

此外，為用戶提供良好的整體體驗(yàn)對(duì)這些應(yīng)用程序的成功起著重要作用。為了實(shí)現(xiàn)這一點(diǎn)，我們還需要更好的用戶界面（UI）。

作為開發(fā)人員，我們必須確保應(yīng)用程序的外觀和視感符合更高的標(biāo)準(zhǔn)，以便吸引新用戶并保留現(xiàn)有用戶。我希望這些事實(shí)能讓你相信 UI 設(shè)計(jì)的重要性。

談到 UI 設(shè)計(jì)，我們使用的圖標(biāo)體現(xiàn)了它的個(gè)性。

圖標(biāo)庫

圖標(biāo)或許很小，但即便是沒有一個(gè)單詞文本的圖標(biāo)，也能給用戶提供強(qiáng)有力的信息。說到圖標(biāo)，我們可以使用現(xiàn)成的圖標(biāo)庫，或者獨(dú)立構(gòu)建圖標(biāo)。然而，鑒于以下原因，我建議使用圖標(biāo)庫。

• 圖標(biāo)庫能使得整個(gè)應(yīng)用程序保持獨(dú)特的外觀。
• 圖標(biāo)庫能節(jié)省應(yīng)用開發(fā)時(shí)間，因?yàn)槟悴恍枰獜念^開始構(gòu)建圖標(biāo)。
• 最重要的是，可以通過選擇大多數(shù)用戶已經(jīng)熟悉的圖標(biāo)子集使得應(yīng)用程序個(gè)性化。
• 如果你有一整套應(yīng)用程序，你可以在應(yīng)用程序中統(tǒng)一使用這些圖標(biāo)庫。

在本文中，我將討論現(xiàn)有的五個(gè)常用圖標(biāo)庫的用法以及優(yōu)缺點(diǎn)。

1. ICONS8

Icons8 是最受設(shè)計(jì)師和開發(fā)者歡迎的圖標(biāo)庫之一。它提供超過 140000 個(gè)圖標(biāo)，涵蓋 35 個(gè)不同類別供你使用。

為開發(fā)項(xiàng)目找到最合適的圖標(biāo)組合是你最忙碌耗時(shí)的任務(wù)之一。有了 Icons8，你可以選擇一種風(fēng)格，并立即得到一個(gè)龐大圖標(biāo)組合。你還可以通過添加輪廓、不同顏色、文本效果來自定義它們，而不會(huì)浪費(fèi)寶貴的時(shí)間。

此外，Icons8 通過為你的項(xiàng)目提供像素完美的圖標(biāo)來消除模糊效果，同時(shí)允許你下載任意標(biāo)準(zhǔn)格式的圖標(biāo)，包括 PNG、SVG、嵌入式 HTML 和 PDF。 

Icons8 的主要特點(diǎn)

• 并不是所有的圖標(biāo)都需要注明出處。
• 在下載之前完成自定義圖標(biāo)設(shè)置。
• 你可以找到任意顏色、大小和格式的圖標(biāo)。
• 有不同的圖標(biāo)樣式可供選擇。(填充圖標(biāo)、線條圖標(biāo)、實(shí)心圖標(biāo)等。)
• 免費(fèi)增值服務(wù)。從 13 美元起，有不同的圖標(biāo)、照片、插圖供你選擇。
• 免費(fèi)套餐包括可達(dá) 100 像素的 PNG 圖標(biāo)，你需要更改為付費(fèi)套餐才能下載其他格式。

缺點(diǎn)

• 需要注冊(cè)才能下載圖標(biāo)。
• 在下載圖標(biāo)并在項(xiàng)目中使用它們之前，你必須仔細(xì)檢查，因?yàn)橛行﹫D標(biāo)需要注明出處。

2. Flaticon

Flaticon 是另一個(gè)有名的圖標(biāo)庫，我們可以將其用于 UI 設(shè)計(jì)，它以免費(fèi)和高級(jí)軟件包的形式提供了超過 200 萬個(gè)不同的圖標(biāo)。像 Icons8 一樣，你可以在下載之前編輯 Flaticon 圖標(biāo)。但是，F(xiàn)laticon 不提供像 Icons8 那樣豐富的編輯選項(xiàng)。

另一方面，你可以下載分辨率可達(dá) 512 像素的 PNG 版本圖標(biāo)。如前所述，F(xiàn)laticon 還分為免費(fèi)和付費(fèi)版本，用戶可以在付費(fèi)版本中使用大量更高級(jí)的圖標(biāo)。

如果你是 Flaticon 的游客用戶，你只能創(chuàng)建一個(gè)收藏，并且每天只能下載 10 個(gè)圖標(biāo)。你可以通過在 Flaticon 注冊(cè)，每天最多擴(kuò)展到 3 個(gè)收藏和下載 100 個(gè)圖標(biāo)，而不會(huì)產(chǎn)生任何費(fèi)用。最重要的是，他們的高級(jí)版本允許你創(chuàng)建無限的圖標(biāo)集合，每天下載 2000 個(gè)圖標(biāo)。 

Flaticon 的主要特點(diǎn)

• 提供 SVG、EPS、PSD、BASE 64 和 PNG 格式。
• 為 Adobe 的創(chuàng)意云套件（CC）提供了擴(kuò)展。（校對(duì)者注：目前并沒有搜索到相關(guān)擴(kuò)展，官網(wǎng)鏈接已失效，可能是該擴(kuò)展已下架）
• 能在下載之前進(jìn)行自定義圖標(biāo)設(shè)計(jì)。
• 高級(jí)套餐的價(jià)格為每月 9.99 歐元。
• 高級(jí)套裝提供無限數(shù)量的圖標(biāo)，包括三百萬多個(gè)高級(jí)圖標(biāo)的集合。
• 可以在 GSuite 應(yīng)用程序中直接使用 Flaticon 圖標(biāo)。
• 可以使用 Flaticon 為演示文稿、故事、博客和網(wǎng)站創(chuàng)建背景圖像。

缺點(diǎn)

• 使用免費(fèi)版本時(shí)需要提供注明出處。

3. Font Awesome

Font Awesome 是開發(fā)者常用的另一個(gè)流行圖標(biāo)庫，主要是因?yàn)樗苯又С?Bootstrap 和 CSS。然而，F(xiàn)ont Awesome 圖標(biāo)比 Icons8 和 Flaticon 少。因?yàn)?Font Awesome 是 Bootstrap CSS 框架中使用的默認(rèn)圖標(biāo)集，它成為了任何使用 Bootstrap 開發(fā)項(xiàng)目的默認(rèn)選擇。

如果深入探究會(huì)發(fā)現(xiàn)，F(xiàn)ont Awesome 中有兩個(gè)庫，分別為免費(fèi)版和專業(yè)版。免費(fèi)版僅包含 1,598 個(gè)圖標(biāo)，而專業(yè)版包含額外的 6,250 個(gè)圖標(biāo)和其他功能。

顧名思義，F(xiàn)ont Awesome 使用字體而不是圖像，因此在免費(fèi)版和專業(yè)版中，它都提供了像素完美的圖標(biāo)，簡(jiǎn)單的 CSS 樣式，托管的工具包，強(qiáng)大的轉(zhuǎn)換以及輕松的升級(jí)。Font Awesome 沒有提供 Icon8 或 Flaticoin 之類的編輯選項(xiàng)，但為你提供了 CSS 類，可以直接在 HTML 中定義使用。

使用免費(fèi)版，你只能下載所選擇圖標(biāo)的完整版本，如果你希望使用 Regular、Light 或 Duotone 等字體，則需要切換到專業(yè)版。 

Font Awesome 的主要特點(diǎn)

• 從 Font Awesome 3.0 版本開始，不再需要注明出處。
• 支持 CSS 和 Bootstrap。
• 提供 CSS 類，Unicode 和 SVG 格式的圖標(biāo)。
• 可以使用純 CSS 直接更改圖標(biāo)的基本屬性（顏色、陰影、背景等）。
• 可以輕松升級(jí)到最新版本。
• Font Awesome 全局 CDN 和緩存可用于更快地加載圖標(biāo)。
• 專業(yè)版價(jià)格為每年 99 美元，包括自定義設(shè)置，人工技術(shù)支持，專業(yè)版下載，標(biāo)準(zhǔn)專業(yè)證書和其他功能。

4. Fontisto

與我們討論的前三個(gè)圖標(biāo)包不同，F(xiàn)ontisto 是一個(gè)完全免費(fèi)的矢量圖標(biāo)庫，你可以將其用于項(xiàng)目開發(fā)和設(shè)計(jì)目的。你只需從它網(wǎng)站點(diǎn)擊幾下就可以定制圖標(biāo)。添加旋轉(zhuǎn)效果、動(dòng)畫、邊框等簡(jiǎn)單的修改，你可以用字體來完成。你也可以下載圖標(biāo)的 CSS 類。由于 Fontisto 支持 CSS，所以可以直接對(duì)圖標(biāo)的 CSS 屬性進(jìn)行修改，包括圖標(biāo)大小、顏色、背景等。

除此之外，F(xiàn)ontsto 提供了幾種方法來開始項(xiàng)目，比如使用 CDN，通過將整個(gè) Fontsto 目錄復(fù)制到項(xiàng)目中來直接使用 CSS。你可以使用包管理器，如 npm、yarn 或者 bower 等。使用以下命令：

使用 Fontisto CDN：

<link rel=“stylesheet” href=“https://cdn.jsdelivr.net/npm/[email protected]/css/fontisto/fontisto.min.css”></i>
復(fù)制代碼

使用 CSS：

<!DOCTYPE html> 
 <html lang="en">     
  <head>         
   <meta name="viewport" content="width=device-width, initial-scale=1">         
   <!-- fontisto css -->         
   <link href="fontisto/css/fontisto.min.css" rel="stylesheet">       
  </head>     
  <body>         
   <i class="fi fi-facebook"><i>         
   <i class="fi fi-twitter"><i>         
   <i class="fi fi-instagram"><i>     
  </body> 
 </html>
復(fù)制代碼

使用包管理：

npm install fontisto                    // npm
yarn add fontisto                       // yarn
bower install fontisto                  // bower
composer require kenangundogan/fontisto // composer
復(fù)制代碼

Fontisto 的主要特點(diǎn)

• 完全免費(fèi)用于商業(yè)用途。
• 不需要使用 Javascript。
• 支持使用 CSS。
• 完美適配高分辨率顯示器。
• 圖標(biāo)是可伸縮的。

你可以在項(xiàng)目文檔中找到更多關(guān)于 Fontisto 的使用信息。

5. Streamline Icons

Streamline Icons 是另一個(gè)優(yōu)秀的圖標(biāo)庫，你可以在項(xiàng)目開發(fā)中使用。Streamline 大約有 30000 個(gè)漂亮的可適應(yīng)性圖標(biāo)，包括 50 多個(gè)類別。Streamline 圖標(biāo)庫以其對(duì)優(yōu)化草圖的支持而出名，這使得操作圖標(biāo)寬度和顏色變得容易。你可以在 Streamline 中創(chuàng)建一個(gè)免費(fèi)賬戶并開始使用圖標(biāo)，也可以直接將整個(gè)圖標(biāo)集下載到你的設(shè)備上。像 Icon8、Font Awesom 和 FlatiCoin 一樣，Streamline 支持在下載所需圖標(biāo)之前進(jìn)行編輯。你可以輕松更改像素大小、格式，并在類似設(shè)計(jì)之間切換。但是，除非升級(jí)軟件包，否則無法更改圖標(biāo)的顏色。 

Streamline Icons 的主要特點(diǎn)

• 提供 Sketch、AI、EPS、PDF、PNG 和 SVG 格式。
• 用于搜索和編輯圖標(biāo)的 Web 應(yīng)用程序。
• 三個(gè)套餐版本，包括免費(fèi)版、基礎(chǔ)版和旗艦版。
• 免費(fèi)版中有 30000 個(gè)圖標(biāo)可供使用。
• 基礎(chǔ)版包含 12000 多個(gè)圖標(biāo)，有 .iconjar .sketch .fig .xd .svg .ai .pdf .png 等類型，售價(jià) 194 美元，而旗艦版包含 31500 多個(gè)圖標(biāo)。

缺點(diǎn)

• 除非你購買了付費(fèi)高級(jí)套餐，否則必須注明出處。

總結(jié)

以上圖標(biāo)庫只是互聯(lián)網(wǎng)上許多可用庫的子集，由于它們的實(shí)用性和豐富的功能集而流行。然而，一個(gè)優(yōu)秀的圖標(biāo)庫只是開發(fā)者選擇圖標(biāo)庫的一個(gè)方面。最好要考慮圖標(biāo)升級(jí)的適用性、易用性，以及使用所選圖標(biāo)庫在開發(fā)項(xiàng)目的啟動(dòng)速度。

此外，決定是購買圖標(biāo)還是堅(jiān)持使用免費(fèi)圖標(biāo)也很重要，因?yàn)槟憧赡苄枰紤]其中一些圖標(biāo)需要注明出處?？啥ㄖ菩院涂捎酶袷揭彩沁x擇這些圖標(biāo)的考慮因素，大多數(shù)時(shí)候，每個(gè)圖標(biāo)庫都包含其獨(dú)特的設(shè)計(jì)類別，如材質(zhì)、矢量、CSS、SVG 等。

因此，在為開發(fā)項(xiàng)目選擇圖標(biāo)庫之前，請(qǐng)考慮一下從本文中學(xué)到的知識(shí)。我相信這會(huì)讓你的工作流程更順暢。

The End

點(diǎn)個(gè)『在看』支持下