有關Web圖標集的7個專家提示用法和優點

您是否想為網站使用圖標集以及選擇哪個圖標集？這些專家技巧可能只是使您相信許多專業的Web開發人員已經知道的知識：從包含的圖標集中搜索圖標要比一個個地查找圖標並找到使它們以某種方式保持一致的方法要容易得多。

我們向社區詢問了有關使用圖標集的最佳技巧，其中許多人都同意使用流行的Font Awesome圖標集，但這並不是市場上唯一可用的圖標集。

您正在使用哪個圖標集？在評論中讓我們知道！

 您是否在為網站使用特定的圖標集？您是否將Font Awesome用於特定用途（例如，使用Shopify，新聞稿...）？如果是這樣，為什麼要使用它，您對圖標集有何經驗？您是否使用過他們的CDN，是否注意到使用情況有所改善？

傑夫·羅斯徹（Jeff Roscher）：它添加了漂亮的簡單樣式，使客戶感到現代而又有吸引力

我們在eWorkOrders.com上使用Font Awesome。它是我們營銷站點和我們的軟件即服務（SAAS）產品，計算機化維護管理系統（CMMS）的一部分。在我們的營銷網站上，它添加了漂亮的簡單樣式，使潛在客戶發現現代且有吸引力。我們添加了有趣的邊框和鼠標懸停事件，以使它們更具交互性和刺激性。對於我們的客戶，Font Awesome圖標在輸入字段中用作可視提示，以幫助識別應輸入的數據類型，例如日期字段中的日曆圖標，電子郵件地址字段中的信封或電子郵件地址中的電話圖標。電話號碼字段。它們用於功能按鈕，例如編輯，複製和打印。

這些圖標用於提供有關數據的快速可視信息，例如在過期的工單旁邊或需要注意的地方帶有紅色的感嘆號圖標。它們也在其他幾個地方，只是為了使程序看起來更好。

真棒字體真棒！他們的CDN速度很快，對於我們需要的每種不同圖標，都有很多選擇。我們從未失望過。

Rachel Foley：一種經濟實惠的方式來輕鬆訪問大型圖標庫

在“映射我的客戶”中，我們完全依賴Font Awesome來提供所有營銷渠道和產品的圖像，包括：

• 網站
• 電郵
• 社交媒體
• 自定義圖形
• 移動應用
• 網絡應用

我們使用Font Awesome是因為它是一種負擔得起的輕鬆訪問大型圖標庫的方法。風格更加有趣，與我們的品牌保持一致。此外，我們能夠利用不同的權重和样式的圖標為我們提供了自由。

我們將CDN用於我們的應用程序，從而在整個產品用戶體驗中獲得非常一致的感覺。另外-在需要時進行升級非常簡單。有了市場營銷資料，我們變得更加靈活一些，並且混合使用了CDN，本地安裝和矢量版本。

自一月份全面採用以來，FA一直對我們可靠。

安德魯·魯迪瑟（Andrew Ruditser）：隨著Font Awesome的升級，我們也進行了升級

Font Awesome is used on all our sites since the dawn of time. When we first started working with Font Awesome, it was mainly used for their 社交媒體 Icons. As Font Awesome upgraded, so did we. Not only are their phone icons fantastic, we enjoy the comical icons that they offer. As of recent, Font Awesome announced their version 6 icons. To us, this shows that Font Awesome cares for their users, and want to keep their system up to date with recent code.

Font Awesome現在提供多種圖標供您選擇。從設計階段到開發階段，我們發現這種靈活性對我們有所幫助。對於Font Awesome，他們的平台為用戶提供了兩種選擇。 First Options是一項免費服務，提供1,588個免費圖標供您選擇。第二個選項是Pro會員資格，提供7,842個圖標。該公司也有我們所謂的Icon備忘單。此列表顯示了Font Awesome提供的所有圖標，從而告知我們它們是免費軟件包還是專業軟件包的一部分。

另外，Font Awesome還提供了從CDN中提取其代碼的選項。我們強烈建議您走他們的路線。他們的CDN響應時間很快，我們的網站和他們的平台之間幾乎沒有“滯後”。

傑夫·羅梅羅（Jeff Romero）：它使頁面速度更快

我們在Wordpress上為中小型企業客戶開發自定義網站。歷史上，我們使用圖像來表示我們網站上的各種圖標，從社交媒體資料到電話和電子郵件圖標。使用圖像作為圖標的過程需要找到一組一致的圖標，然後上載它們，然後調整它們的大小以確保它們適合該網站。

儘管它是一個很小的圖像文件，但是要獲得一致的圖標集並使它們與網站模板匹配，需要一些過程。現在，使用Font Awesome及其Wordpress插件，我們可以用一組一致的媒體替換圖標，這些媒體只需要復制/粘貼一行HTML。更好的是，可以使用少量CSS（使用font-size屬性）來調整圖標的大小。這些圖標的顯示效果優於基於圖像的圖標，並且在移動設備上清晰可見。最後，由於它是一行HTML而不是圖像文件，因此它使頁面的速度更快。

萬斯：在團隊中沒有設計師的情況下特別好

作為Web開發人員，我使用Font Awesome作為許多精美圖標的快速解決方案。話雖如此，當您的開發團隊中沒有設計師時，Font Awesome尤其有用。這對於開發Wordpress插件非常方便，因為開發人員可以立即使用Font Awesome的CDN將它們嵌入到其插件中。

到目前為止，我在Font Awesome方面的經驗很好。但這並不意味著它沒有任何缺點。明顯的缺點之一是頁面加載速度（性能）。由於這是一種快速的解決方案，因此即使只使用幾個圖標，也必須嵌入一整套圖標。這可能會降低網站的加載速度和Google Page Speed（PSI）得分。

Sunny Ashley：簡單，乾淨，可立即被新訪客識別

我們在網站頁腳中使用了Font Awesome圖標。具體來說，我們使用Facebook，Twitter和LinkedIn圖標來引用我們的社交媒體渠道。它們簡單，乾淨，並且對於新訪客而言立即可見。正如Font Awesome的其他用戶所知道的，它們也非常快速且易於配置。

BurakÖzdemir：羽毛圖標不會導致DOM大小過大

Feather Icons是由Cole Bemis設計和維護的，可讀性好，視覺上令人愉悅的開源圖標的集合。截至2020年6月，有280多個圖標可用。 Feather Icons提供的所有圖標均已獲得MIT許可，可作為SVG文件單獨下載。您可以在下載Feather Icon的網站上自定義圖標大小，圖標的筆觸顏色和筆觸寬度。

如果您是開發人員或知道如何處理一些基本的前端任務，則“羽毛圖標”可能是您的網站或項目的理想選擇。由於這些輕量級圖標也可以使用模塊化JavaScript庫進行呈現，因此它們不會引起過多的DOM大小，該指標可能會損害您的網頁性能。因此，與市場上其他可用的軟件包相比，使用Feather Icons可以降低頁面加載速度。使用此圖標集的唯一缺點是您找不到大多數品牌圖標。