CSS - 圖示

上一頁
下一頁

**CSS 圖示** 用於向網頁元素新增圖形表示、符號或小圖片。它們在 Web 開發中有多種用途，例如

目錄


 

圖示的重要性

  • **增強使用者體驗**：為網頁上的各種元素提供視覺提示和上下文，例如，而不是新增儲存、刪除等文字，您可以新增一個圖示來表示它們。
  • **縮短載入時間**：與傳統的影像圖示相比，CSS 圖示通常更輕量級，這意味著它們可以快速載入，從而減少整體頁面載入時間。
  • **可擴充套件性**：CSS 圖示可以輕鬆地放大或縮小，而不會損失質量。這對於響應式網頁設計非常重要。
  • **可定製性**：可以使用 CSS 規則自定義 CSS 圖示的大小、顏色和其他視覺屬性。這種靈活性使您可以將圖示與網站的整體設計和品牌相匹配。
  • **可訪問性**：可以對 CSS 圖示進行樣式設定以滿足可訪問性標準，例如為螢幕閱讀器提供替代文字。
  • **減少 HTTP 請求**：使用 CSS 圖示可以減少網頁發出的 HTTP 請求數量，因為它們通常是樣式表的一部分。

如何向網頁新增圖示？

  • **內聯 SVG**：將 SVG（可縮放向量圖形）直接嵌入到 HTML 程式碼中。您可以建立或獲取 SVG 圖示並將其插入為內聯元素。
  • **圖示字型**：圖示字型是包含圖示作為字形的自定義字型。您可以透過設定適當的 font-family 並指定圖示的 Unicode 字元來使用這些字型顯示圖示。
  • **CSS 背景圖片**：您可以使用 CSS 背景圖片透過在元素上設定 **background-image** 屬性來顯示圖示。
  • **偽元素**：使用 **::before** 和 **::after** 偽元素在 HTML 元素之前或之後插入內容，然後對該內容進行樣式設定以顯示圖示。
  • **CSS 庫和框架**：許多 CSS 庫和框架（如 Font Awesome、Material Icons 和 Google 圖示）提供預先設計好的圖示集，您可以輕鬆地將它們包含在您的專案中。它們通常帶有現成的類或實用程式類。

使用 SVG 的圖示

在 HTML 中，可以使用 **<svg>** 標籤使用 **<path>** 標籤的 d 屬性建立自定義圖示。

SVG 中 <path> 標籤的 **d** 屬性使用預定義語法中的一系列命令和引數定義路徑的形狀，表示線條、曲線和其他幾何形狀。這些命令包括 moveto (M)、lineto (L)、curveto (C) 等，每個命令後面都跟著指定路徑結構的座標或控制點。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .icon {
            width: 24px; 
            height: 24px; 
            fill: #000; 
            margin-left: 15px;
        }
    </style>
</head>

<body>
    <h1>SVG Icons</h1>
    <!-- Search Icon -->
    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M23.707 22.293l-6.364-6.364C18.454 14.68 19 13.418
                 19 12c0-3.866-3.134-7-7-7s-7 3.134-7 7 3.134 7 7 7c1.418 
                 0 2.68-.546 3.929-1.071l6.364 6.364a1 1 0 0 0 1.414-1.414zM5 
                 12c0-3.309 2.691-6 6-6s6 2.691 6 6-2.691 6-6 6-6-2.691-6-6z"/>
    </svg>
    
    <!-- Download Icon -->
    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M19 14v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-7-9h2v7h3l-4 4-4-4h3V5zm-1-2h4V0h-4v3z"/>
    </svg>
    
    <!-- Cloud Icon -->
    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M19.35 10.04c.63-.34 1.22-.79 1.68-1.35C21.47 6.39 19.76 4 
                 17 4c-2.33 0-4.31 1.45-5.13 3.5H11.5C8.42 7.5 6 9.92 6 13s2.42
                 5.5 5.5 5.5h7c3.04 0 5.5-2.46 5.5-5.5-.01-2.52-1.65-4.67-4-5.46l.35.5z"/>
    </svg>
    
    <!-- Home Icon -->
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l10 9h-3v11h-6V14H9v8H3V11H0l12-9z"/>
    </svg>
</body>
</html>

使用圖示字型的圖示

要在您的 Web 專案中使用圖示字型，您需要按照以下步驟操作

  • **包含圖示字型庫，** 常用的選擇包括 Font Awesome、Material Icons 或自定義圖示字型。
  • **在 HTML 中使用 <i> 標籤** 並將圖示字型類應用於它。然後，指定所需圖示的 Unicode 字元。

示例

<!DOCTYPE html>
<html>

<head>
    <!-- Include Font Awesome -->
    <link rel="stylesheet" 
          href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <style>
        .icon {
            /* Specify Font Awesome family */
            font-family: "Font Awesome 5 Free"; 
            /* Minimum Font weight for Font Awesome */
            font-weight: 600;
            font-size: 24px; 
            color: #000; 
            margin-right: 15px; 
        }
    </style>
</head>

<body>
    <h1>CSS font Awesome Icons</h1>
    <span class="icon"> &#xf002; </span> 
    <span class="icon"> &#xf019; </span>
    <span class="icon"> &#xf0c2; </span> 
    <span class="icon"> &#xf015; </span> 
</body>

</html>

使用圖片的圖示

CSS 中的 **background-image** 屬性也可用於顯示儲存在系統儲存中的圖示。

示例

以下示例演示瞭如何使用背景圖片作為圖示

<DOCTYPE html> 
<html>

<head>
    <style>
        .icon-img {
            width: 30px;
            height: 30px;
            background-image: url('/css/images/logo.png');
            background-size: cover;
        }
    </style>
</head>

<body>
   <div class="icon-img"> </div>
</body>

</html>

使用偽元素的圖示

像 **::before** 和 **::after** 這樣的偽元素可以用來在元素之前或之後插入一個圖示，如下面的示例所示。

要了解更多關於偽元素的資訊，請檢視關於 CSS 偽元素 的教程。

示例

在此示例中，我們使用偽元素來渲染圖示。

<DOCTYPE html> 
<html>

<head>
    <style>
        li {
            list-style: none;
        }
        li::before {
            content: url(/css/images/smiley.png);
            margin-right: 15px;
            font-size: 20px;
        }
        p::after {
            content: url(/css/images/smiley.png);
            margin-left: 15px;
            font-size: 5px;
        }
    </style>
</head>

<body>
    <ul>
        <li>Butterscotch</li>
        <li>Chocolate</li>
        <li>Coconut</li>
    </ul>

    <p> 
        In the above list we made custom label using 
        before pseudo-element, we added icon at the end 
        of this paragraph using ::after pseudo-element. 
    </p>
</body>

</html>

使用 Google 圖示

我們也可以在網頁中使用 Google 圖示 提供的圖示。這樣，您只需提及圖示的名稱即可呼叫任何圖示。

您只需要在 HTML 程式碼的頭部部分新增以下連結

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

**注意：** 無需安裝或下載 Google 圖示。

示例

以下示例演示瞭如何使用 Google 圖示。

<DOCTYPE html> 

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

<body>
    <h1> Google Fonts Icon </h1>
    <span class="material-icons" style="font-size:40px;"> 
        pets 
    </span>
    <span class="material-icons" style="font-size:40px;">
        settings
    </span>
    <span class="material-icons" style="font-size:40px;">
        attachment
    </i>
    <span class="material-icons" style="font-size:40px;">
        person
    </span>
</body>

</html>

Bootstrap 圖示

要在網頁的頭部部分使用 Bootstrap 圖示，請新增以下程式碼。

<link rel="stylesheet" 
      href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

示例

以下示例演示瞭如何使用 Bootstrap 圖示

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
    <h1> Bootstrap Icons </h3>
    <span class="glyphicon glyphicon-cloud"> </span>
    <span class="glyphicon glyphicon-remove"> </span>
    <span class="glyphicon glyphicon-user"> </span>
    <span class="glyphicon glyphicon-envelope"> </span>
    <span class="glyphicon glyphicon-thumbs-up"> </span>
</body>

</html>
列印頁面
上一頁
下一頁
廣告