網頁圖示 - 簡介

圖示是用於表示網頁上特定操作或功能的符號。圖示不僅用於文件，也用於應用程式，它們可以是可選擇的，也可以是非可選擇的。例如，我們在應用程式按鈕上看到的影像都是圖示，這些按鈕是可以選擇的。同樣，當我們使用圖示作為公司徽標時，它通常是非可選擇的。

在 Windows 環境中，如果我們靜音系統音量，它將透過圖標表示，如下所示。

使用網頁圖示，我們可以表示載入頁面、停用選項、連結、重定向等。這些圖示可以翻轉、旋轉、調整大小、新增邊框、反轉和著色。

圖示字型

圖示字型包含符號和字形。載入所需的字型後，可以使用該字型提供的任何圖示，方法是使用圖示的類名。我們還可以使用 CSS 屬性為圖示應用不同的顏色並調整其大小。有幾個圖示庫（字型）提供圖示。本教程重點介紹三種主要字型：

• Font Awesome
• Bootstrap Glyphicons
• Google 的 Material Icons

Font Awesome

該字型提供 519 個免費的可縮放向量圖示。該庫完全免費，個人和商業用途均可。這些圖示可以輕鬆自定義。最初，它們是為 Bootstrap 開發的。

Bootstrap Glyphicons

這是一個單色圖示庫，提供光柵影像格式、向量影像格式和字型格式。它以字型格式提供超過 250 個字形。您可以在 Web 專案中使用這些字型。這些圖示不是免費的，但是您可以在基於 Bootstrap 的專案中使用它們，而無需購買。

Google 的 Material Icons

Google 提供了約 750 個根據“Material Design 指南”設計的圖示，這些圖示被稱為 **Material Design** 圖示。這些圖示簡潔明瞭，並支援所有現代 Web 瀏覽器。由於這些圖示是基於向量的，因此它們也是可縮放的。要使用這些圖示，我們必須載入字型（庫）**material-icons**。