`icons`及`logo`設定

在 MkDocs Material 中，你可以透過 mkdocs.yml 來設定 網站圖示（icons）、標誌（logo），以及其他視覺元素。

🔹 1. 設定網站 Logo（標誌）

你可以在 mkdocs.yml 加入：

theme:
  name: material
  logo: assets/logo.png  # 指定 Logo 圖片

📌 說明：

assets/logo.png 是你的 Logo 圖片路徑，可使用 .png、.svg 等格式。
圖片需放在 docs/assets/ 目錄下，或提供完整網址。

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

theme:
  name: material
  favicon: assets/favicon.ico

📌 favicon.ico 是瀏覽器標籤上的小圖示（16x16 或 32x32 大小）。

🔹 3. 設定 Header / Footer 圖示（Icons）

MkDocs Material 內建 Material Icons & FontAwesome Icons，你可以這樣設定：

extra:
  social:
    - icon: fontawesome/brands/github
      link: https://github.com/your-repo
    - icon: fontawesome/brands/linkedin
      link: https://linkedin.com/in/your-profile
    - icon: material/email
      link: mailto:your@email.com

📌 圖示來源：

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

📌 常見 Icons

圖示名稱	範例
`material/github`
`material/email`
`material/twitter`
`fontawesome/brands/facebook`
`fontawesome/brands/instagram`

🔹 4. 設定導航欄 Icons

要在 navbar 上面出現圖示，只需在.md檔的最前面加入如下的 front matter：

---
icon: material/library
---

📌 這樣你的網站標題旁邊就會有 library 圖示了！

🚀 總結

設定項目	設定方式
Logo	`logo: assets/logo.png`
Favicon	`favicon: assets/favicon.ico`
社交 Icons	`extra.social`
導航欄 Icons	在 front matter 中設定 `icon`
自訂 Icons	使用 `material/` 或 `fontawesome/`

這樣你就能輕鬆自訂 Material for MkDocs 的圖示、Logo、Favicon 🎨🚀！

icons及logo設定