CSS 圖示與範例-css教學-PHP中文網

CSS 圖示與範例

王林

發布： 2024-07-30 22:56:43

原創

822 人瀏覽過

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;
}

登入後複製