|
1 | | -## Custom icons for navbar links and navigation |
| 1 | +## Custom icons across your navigation |
2 | 2 |
|
3 | | -Add visual interest and improve navigation clarity with custom icons throughout your documentation site. You can now add icons to navbar buttons, dropdown menu items, sidebar sections, and pages. |
| 3 | +You can now use your own image files as icons throughout your `docs.yml` navigation config, including for [navbar link](/learn/docs/configuration/what-is-docs-yml#navbar-links-configuration), [section, page](/learn/docs/configuration/navigation#sidebar-icons), and [product](/learn/docs/configuration/products#add-your-product-configuration) icons. |
4 | 4 |
|
5 | | -Icons support three formats: |
| 5 | +Icons now support three formats: |
6 | 6 | - **Font Awesome icons**: Use icon names like `fa-solid fa-seedling` or `fa-regular fa-leaf`. Pro and Brand icons from Font Awesome are supported. |
7 | | -- **Custom image files**: Use relative paths to image files (e.g., `./assets/icons/plant-icon.svg`). Paths are relative to the `docs.yml` file. |
| 7 | +- **Custom image files**: Use relative paths to custom image files (e.g., `./assets/icons/plant-icon.svg`). Paths are relative to the `docs.yml` file. |
8 | 8 | - **Inline SVG**: Provide an SVG string wrapped in quotes. |
9 | 9 |
|
10 | | -### Navbar link icons |
11 | | - |
12 | | -Add icons to navbar buttons and dropdown menu items: |
13 | | - |
14 | | -```yaml title="docs.yml" |
15 | | -navbar-links: |
16 | | - - type: minimal |
17 | | - text: Plant catalog |
18 | | - href: https://example.com/plants |
19 | | - icon: fa-solid fa-seedling |
20 | | - - type: filled |
21 | | - text: Get started |
22 | | - href: https://example.com/start |
23 | | - icon: ./assets/icons/leaf.svg |
24 | | - rightIcon: fa-solid fa-arrow-right |
25 | | -``` |
26 | | -
|
27 | | -### Sidebar navigation icons |
28 | | -
|
29 | | -Add icons to sections and pages in your sidebar: |
30 | | -
|
31 | | -```yaml title="docs.yml" |
| 10 | +```yaml Sidebar icons in docs.yml |
32 | 11 | navigation: |
33 | | - - section: Plant care |
34 | | - icon: fa-solid fa-seedling |
| 12 | + - section: Home |
| 13 | + icon: fa-regular fa-home # Font Awesome icon |
35 | 14 | contents: |
36 | | - - page: Watering guide |
37 | | - icon: fa-solid fa-droplet |
38 | | - path: ./pages/watering.mdx |
39 | | - - page: Sunlight requirements |
40 | | - icon: ./assets/icons/sun.svg |
41 | | - path: ./pages/sunlight.mdx |
| 15 | + - page: Introduction |
| 16 | + icon: ./assets/icons/intro-icon.svg # Custom image file |
| 17 | + path: ./pages/intro.mdx |
| 18 | + - page: Custom Features |
| 19 | + icon: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z'/></svg>" # Inline SVG |
| 20 | + path: ./pages/custom.mdx |
| 21 | + - api: API Reference |
| 22 | + icon: fa-regular fa-puzzle |
42 | 23 | ``` |
43 | | -
|
44 | | -Learn more in the [navigation configuration](/learn/docs/configuration/navigation#sidebar-icons) and [navbar links configuration](/learn/docs/configuration/what-is-docs-yml#navbar-links-configuration) documentation. |
0 commit comments