首頁 >web前端 >css教學 >CSS 圖示與範例

CSS 圖示與範例

王林
王林原創
2024-07-30 22:56:43790瀏覽

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:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

使用圖示

要使用圖標,請新增 ;或具有適當類別的 元素:

<i class="fas fa-camera"></i>

材質圖示

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

中:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

使用圖示

要使用圖標,請新增 ;具有材質圖標類別和圖標名稱的元素:

<i class="material-icons">camera_alt</i>

2.使用 CSS 自訂圖示

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

建立基本的 HTML 結構

<div class="icon-star"></div>

加入 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 width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 2L2 7v10l10 5 10-5V7z"/>
</svg>

使用 SVG 作為背景圖片

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

小貼士

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

以上是CSS 圖示與範例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn