圖標(biāo)（Icon）字體是網(wǎng)站設(shè)計(jì)和UI設(shè)計(jì)中都無(wú)法缺少的最有用的元素之一。 今天，我們?yōu)槟銕?lái)了一些現(xiàn)代和創(chuàng)意的圖標(biāo)集合，你可以在你的網(wǎng)站設(shè)計(jì)或用戶界面設(shè)計(jì)中使用它們，以幫助你的設(shè)計(jì)增加一些獨(dú)特的視覺特點(diǎn)和吸引力。

使用圖標(biāo)字體，你不必再依賴PNG文件庫(kù)，無(wú)需使用矢量文件來(lái)調(diào)整圖標(biāo)的大小和進(jìn)行編輯即可使其適合你的網(wǎng)站設(shè)計(jì)。 而且，更重要的是，你不必再針對(duì)各種屏幕尺寸來(lái)單獨(dú)去優(yōu)化圖標(biāo)。

但是，找到適合你的設(shè)計(jì)項(xiàng)目的正確圖標(biāo)字體可能是一項(xiàng)挑戰(zhàn)。 我們希望使這一過(guò)程更加容易。 通過(guò)瀏覽我們精選的圖標(biāo)字體，希望可以幫助你更快更好的完成你的項(xiàng)目（一定要看看我們的選擇圖標(biāo)字體的技巧，以幫助你入門）。

1.Icofont – Free Creative Icon Font

Icofont提供了具創(chuàng)意的圖標(biāo)字體，你可以免費(fèi)下載和使用。 該字體包括30個(gè)不同類別的2100多個(gè)圖標(biāo)，例如貨幣，社交，品牌徽標(biāo)等。 使用此工具的好處之一是，它既可以SVG格式提供，也可以字體的形式提供。

2.Font Awesome – Free Icon Font

Font Awesome可能是Internet上最受歡迎的圖標(biāo)字體，具有7000多個(gè)圖標(biāo)。 超過(guò)1億個(gè)網(wǎng)站都在使用它，其中包括麥當(dāng)勞和耶魯大學(xué)等品牌。 它包含許多有用的功能。

3.Ionicons – Free Minimal Icon Font

Ionicons是另一組具有極簡(jiǎn)風(fēng)格和簡(jiǎn)單設(shè)計(jì)特征的創(chuàng)意圖標(biāo)。 該圖標(biāo)字體專為網(wǎng)站設(shè)計(jì)和移動(dòng)用戶界面設(shè)計(jì)而準(zhǔn)備，并且與iOS和Android平臺(tái)兼容。 它總共具有1100多個(gè)圖標(biāo)，根據(jù)MIT開源許可證獲得許可。

4.150 eCommerce Icons with Icon Font

這是具有現(xiàn)代簡(jiǎn)約圖標(biāo)設(shè)計(jì)的獨(dú)特圖標(biāo)的集合，包括150個(gè)不同的圖標(biāo)，你可以在各種電子商務(wù)設(shè)計(jì)中使用它們。 這些圖標(biāo)有EPS，AI，SVG和字體版本。

5.130 Vector Line Icons & Icon Font

該資源文件匯總包括與娛樂，多媒體，在線活動(dòng)，生活方式等相關(guān)圖標(biāo)的混合集合。 該程序包總共包含130個(gè)圖標(biāo)，你可以將其用作圖標(biāo)字體，也可以使用其矢量EPS和AI文件根據(jù)自己的喜好進(jìn)行編輯和自定義。

6.Weather Icons and Icon Font

Weather通常用于許多不同類型的Web和UI設(shè)計(jì)中，尤其是在移動(dòng)用戶界面中。 使用此工具包，你可以從42個(gè)與天氣相關(guān)的獨(dú)特圖標(biāo)中進(jìn)行選擇。 這些圖標(biāo)還可以使用AI，PSD，SVG和字體格式。

7.32 Weather Icons and Font

與上面的圖標(biāo)字體包很相似，此包具有一組極簡(jiǎn)線條風(fēng)格的圖標(biāo)。 它還包括32種時(shí)尚的天氣圖標(biāo)，格式多樣，包括AI，SVG，EPS和字體。 干凈簡(jiǎn)潔的設(shè)計(jì)使這些圖標(biāo)適用于所有類型的業(yè)務(wù)和專業(yè)設(shè)計(jì)。

8.Fontisto – Free Modern Icon Font

Fontisto是另一個(gè)很棒的免費(fèi)圖標(biāo)字體，具有多種類別現(xiàn)代時(shí)尚圖標(biāo)。 這些圖標(biāo)可完全縮放，并且在Retina顯示屏上看起來(lái)很棒。 它也可以完全免費(fèi)用于商業(yè)項(xiàng)目。

9.Dripicons – Free Vector Line-Icon Font

Dripicons是一個(gè)線條圖標(biāo)的集合，具有平滑和極簡(jiǎn)的設(shè)計(jì)。 這些圖標(biāo)具有適合于網(wǎng)站設(shè)計(jì)和移動(dòng)用戶界面設(shè)計(jì)的現(xiàn)代布局。 它也可以免費(fèi)用于商業(yè)項(xiàng)目。

10.Typicons – Free Simple Icon Font

Typicons帶有一組輕巧和簡(jiǎn)單的圖標(biāo)，可在Web和本機(jī)應(yīng)用程序用戶界面上使用。 字體包括超過(guò)330個(gè)獨(dú)特的圖標(biāo)設(shè)計(jì)，這些設(shè)計(jì)在多個(gè)類別中具有可伸縮的設(shè)計(jì)。

選擇圖標(biāo)字體的5個(gè)技巧

以下是一些技巧，可幫助你為各種類型的Web和UI設(shè)計(jì)選擇最佳的圖標(biāo)字體。

1.選擇SVG或字體格式文件（SVG Icons vs Icon Fonts）

關(guān)于是選擇SVG圖標(biāo)還是圖標(biāo)字體的爭(zhēng)論頗多。 雖然這兩種選擇都有其自身的優(yōu)點(diǎn)和缺點(diǎn)，但有些設(shè)計(jì)師更喜歡其中的一種。

值得慶幸的是，我們列表中的大多數(shù)圖標(biāo)字體也包括SVG圖標(biāo)版本。 因此，我們將讓你決定哪個(gè)選項(xiàng)適合你的項(xiàng)目。

2.響應(yīng)性（Make Sure it’s Responsive）

選擇任何類型的圖標(biāo)時(shí)，圖標(biāo)的響應(yīng)能力可能是最重要的功能。 這也是圖標(biāo)字體吸引人的地方，因?yàn)樗鼈兺ǔＷ銐蜢`敏，在所有類型的屏幕尺寸和設(shè)備上看起來(lái)都一樣。

仔細(xì)檢查以確保圖標(biāo)具有響應(yīng)性，特別是如果你使用的是SVG版本的圖標(biāo)。

3.選擇合適的主題（Pick Appropriate Themes）

圖標(biāo)字體有各種樣式和主題。 例如大綱圖標(biāo)，平面設(shè)計(jì)圖標(biāo)，簡(jiǎn)約圖標(biāo)以及不同主題的網(wǎng)站設(shè)計(jì)圖標(biāo)等等。 根據(jù)你正在處理的項(xiàng)目的類型，你可以自行選擇符合主題的正確圖標(biāo)字體。

4.顏色以及可定制性（Colors and Customization）

圖標(biāo)字體的許多好處之一是，它允許你根據(jù)自己的喜好自定義圖標(biāo)。 大多數(shù)現(xiàn)代圖標(biāo)字體甚至都允許你從多個(gè)圖標(biāo)版本中進(jìn)行選擇，包括填充和輪廓版本。

5.免費(fèi)與付費(fèi)版本圖標(biāo)字體（Free vs Premium Icon Fonts）

當(dāng)然，如果你預(yù)算有限，選擇免費(fèi)字體是理想的選擇。 但是，如果你負(fù)擔(dān)得起，建議使用高級(jí)圖標(biāo)字體，不僅僅是為你的Web或UI設(shè)計(jì)賦予獨(dú)特的外觀，而且還可以完全控制這些圖標(biāo)，并能夠在商業(yè)項(xiàng)目中使用它們。

圖標(biāo)對(duì)于設(shè)計(jì)項(xiàng)目來(lái)說(shuō)是一個(gè)可以增加亮點(diǎn)的元素，使用合適的圖標(biāo)可以幫助你獲得更多的關(guān)注度并增加設(shè)計(jì)的風(fēng)格。

想要獲取更多的圖標(biāo)資源，歡迎閱讀原文章（https://designshack.net/articles/inspiration/icon-fonts/）以獲取！

----圖文來(lái)自：design shack 

----由深圳網(wǎng)站建設(shè)公司-Clh翻譯編輯整理，為您提供更多有關(guān)深圳網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)及其他互聯(lián)網(wǎng)應(yīng)用服務(wù)