icons 及 logo 設定

在 Zensical 中，你可以透過 zensical.toml 來設定 網站圖示（icons）、標誌（logo），以及其他視覺元素。安裝後即可使用超過 10,000 個內建圖示。

設定網站 Logo（標誌）

可以用圖片檔（放在 docs/ 底下）：

[project.theme]
logo = "images/logo.png"

也可以改用內建圖示：

[project.theme.icon]
logo = "fontawesome/solid/landmark"

📌 說明：

• 圖片需放在 docs/ 目錄下，可使用 .png、.svg 等格式。
• 內建圖示路徑例如 lucide/smile、fontawesome/solid/landmark。
• Logo 預設會連到首頁（等同 site_url）。若要改連到其他網址：

[project.extra]
homepage = "https://www.vcdemy.com"

設定網站 Favicon（網站標籤小圖示）

[project.theme]
favicon = "images/favicon.png"

📌 Favicon 是瀏覽器標籤上的小圖示（常見為 16x16 或 32x32）。

設定 Header / Footer 圖示（Icons）

Zensical 內建 Material Icons、FontAwesome、Lucide 等圖示集，你可以這樣設定頁尾社交連結：

[[project.extra.social]]
icon = "fontawesome/brands/github"
link = "https://github.com/your-repo"

[[project.extra.social]]
icon = "fontawesome/brands/linkedin"
link = "https://linkedin.com/in/your-profile"

[[project.extra.social]]
icon = "material/email"
link = "mailto:your@email.com"

📌 圖示來源：

• material/* → Material Design Icons
• fontawesome/brands/* → FontAwesome 品牌圖示
• lucide/* → Lucide 圖示

📌 常見 Icons

設定導航欄 Icons

要在側邊導覽標題旁出現圖示，只需在 .md 檔最前面加入 front matter：

---
icon: material/library
---

📌 這樣你的導覽項目旁邊就會有 library 圖示了！

正文裡也可以用 shortcode 插入圖示，例如 :material-rocket-launch: →

自訂圖示

若要加入額外圖示，在 overrides/.icons/ 放入 *.svg，並設定：

[project.theme]
custom_dir = "overrides"

[project.markdown_extensions.pymdownx.emoji]
emoji_generator = "zensical.extensions.emoji.to_svg"
emoji_index = "zensical.extensions.emoji.twemoji"
options.custom_icons = [
  "overrides/.icons",
]

假設檔案是 overrides/.icons/bootstrap/envelope-paper.svg：

• 設定檔寫：bootstrap/envelope-paper
• Markdown 寫：:bootstrap-envelope-paper:

總結

這樣你就能輕鬆自訂 Zensical 的圖示、Logo、Favicon！

參考資料

• Logo and icons - Zensical