CSS 圖示與範例

首頁 > 程式設計 > CSS 圖示與範例

CSS 圖示與範例

發佈於2024-08-23

CSS Icons with examples

CSS 圖示

透過使用圖示庫，可以輕鬆地將圖示新增至我們的 HTML 頁面。

如何加入圖示

為 HTML 頁面新增圖示最簡單的方法是使用圖示庫，例如 Font Awesome。
將指定圖示類別的名稱新增至任何內嵌 HTML 元素（如或）。
CSS 圖示是使用
建立的符號或圖形表示 CSS（層疊樣式表）而不是傳統的圖像格式，如 PNG 或 SVG。
它們通常用於網頁設計中，在不依賴圖像檔案的情況下為網站添加視覺元素。
創建CSS圖示的常用方法有以下幾種：

字體圖示：

這些是由特殊圖標字體創建的圖標，例如 Font Awesome、Material Icons 或 Ion 圖標。這些字體包含一組可以使用 CSS 設定樣式的字形（符號）。

例如

您可以使用 .fa-heart 這樣的類別將心形圖示新增至 HTML，然後使用 CSS 屬性對其進行樣式設定。

CSS 形狀：

可以使用純 CSS 建立圖標，方法是使用 CSS 屬性（如邊框、邊框半徑、背景和變換）來設定 HTML 元素（如

、等）的樣式。此方法通常用於簡單的幾何形狀或客製化設計。
CSS 圖示具有多種優勢，包括可擴展性、易於自訂以及與圖像相比檔案大小可能更小。它們是一種向網頁設計添加視覺元素的多功能且有效的方式。

字體真棒

在您的專案中包含 Font Awesome：
將此行加入 HTML 的

中：

使用圖標

若要使用圖標，請新增具有適當類別的 或元素：

材質圖示

在您的專案中包含材質圖示：
將此行加入 HTML 的

中：

使用圖標

要使用圖標，請新增一個帶有 Material-icons 類別和圖標名稱的 元素：

camera_alt

2.使用 CSS 自訂圖示

您也可以使用 CSS 建立自己的圖示。這是一個使用純 CSS 的簡單範例：

建立基本的 HTML 結構

加入 CSS 來設定圖示樣式

.icon-star {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    position: relative;
    transform: rotate(35deg);
}


.icon-star:before {
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    transform: rotate(-70deg);
}

此 CSS 片段使用邊框和定位來建立一個簡單的星形。

3. SVG 圖標

您也可以使用 SVG 來製作高品質圖示：

內嵌 SVG

使用SVG作為背景圖片

.icon {
    width: 24px;
    height: 24px;
    background: url('data:image/svg xml;base64,...') no-repeat center center;
    background-size: contain;
}

尖端

大小和顏色：對於字體圖示和內聯 SVG，您可以使用 font-size 或寬度和高度屬性調整大小，並使用 color 或 fill 來變更 SVG 的顏色。
輔助功能：始終透過在需要時添加描述性文字或 aria 屬性來考慮輔助功能。
請隨意嘗試並混合不同的方法來找到最適合您的專案的方法！

版本聲明本文轉載於：https://dev.to/wasifali/css-icons-with-examples-5cjm?1如有侵犯，請聯絡[email protected]刪除