假文：Placeholder 與 Icon 的妙用

2025 iThome 鐵人賽

DAY 23

自我挑戰組

網頁設計自我挑戰 - 從零開始系列第 23 篇

17th鐵人賽假文圖標

Bao

2025-08-30 02:11:57

145 瀏覽

分享至

在開發初期，常常還沒有真實的內容或圖片，這時候 Placeholder (佔位符) 就派上用場。它能讓開發者專注於排版，而不是內容。

假文： Lorem Ipsum 是最常用的假文，可以到 lipsum.com 產生。
佔位圖： 像 https://picsum.photos/ 這樣的網站可以生成各種尺寸的隨機圖片。
Icon 圖標： 圖標能讓使用者更快速地理解功能，也能讓網頁看起來更專業。最常用的圖標庫是 Font Awesome，可以透過連結 CDN 快速使用。

在作品集頁面中加入圖標，並用假文填充內容。
在 <head> 中加入 Font Awesome 的 CDN 連結：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
然後在 HTML 中使用圖標：
<i class="fab fa-github"></i> (這是 GitHub 的圖標)

執行成果 :