透過使用圖示庫,可以輕鬆地將圖示新增至我們的 HTML 頁面。
為 HTML 頁面新增圖示最簡單的方法是使用圖示庫,例如 Font Awesome。
將指定圖示類別的名稱新增至任何內嵌 HTML 元素(例如 或 )。
CSS 圖示是使用
建立的符號或圖形表示
CSS(層疊樣式表)而不是傳統的圖像格式,如 PNG 或 SVG。
它們經常用於網頁設計中,在不依賴圖像檔案的情況下為網站添加視覺元素。
建立 CSS 圖示有以下幾種常用方法:
這些是由特殊圖標字體建立的圖標,例如 Font Awesome、Material Icons 或 Ion 圖標。這些字體包含一組可以使用 CSS 設定樣式的字形(符號)。
您可以使用 .fa-heart 這樣的類別將心形圖示新增至 HTML,然後使用 CSS 屬性對其進行樣式設定。
可以使用純 CSS 建立圖標,透過使用 CSS 屬性(如邊框、邊框半徑、背景和變換)來設定 HTML 元素(如
在您的專案中包含 Font Awesome:
將此行加入
<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>
您也可以使用 CSS 建立自己的圖示。這是一個使用純 CSS 的簡單範例:
<div class="icon-star"></div>
.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 片段使用邊框和定位來建立一個簡單的星形。
您也可以使用 SVG 來製作高品質圖示:
<svg width="24" height="24" viewBox="0 0 24 24"> <path d="M12 2L2 7v10l10 5 10-5V7z"/> </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中文網其他相關文章!