mkdocs-material/docs/setup/setting-up-the-footer.md

4.1 KiB
Raw Blame History

template
overrides/main.html

Setting up the footer

The footer of your project documentation is a great place to add links to websites or platforms you or your company are using as additional marketing channels, e.g. :fontawesome-brands-medium:{ style="color: #00AB6C" }, :fontawesome-brands-twitter:{ style="color: #1DA1F2" } or :fontawesome-brands-facebook:{ style="color: #4267B2" }, which can be configured via mkdocs.yml.

Configuration

:octicons-file-code-24: Source · :octicons-milestone-24: Default: none

All social links are rendered next to the copyright information as part of the footer of your project documentation. Add a list of social links in mkdocs.yml with:

extra:
  social:
    - icon: fontawesome/brands/twitter
      link: https://twitter.com/squidfunk

For each entry, the following fields are available:

icon{ #icon }

:octicons-milestone-24: Default: none · :octicons-alert-24: Required This field must point to a valid icon path referencing any icon bundled with the theme, or the build will not succeed. Some popular choices:

  • :fontawesome-brands-behance: fontawesome/brands/behance
  • :fontawesome-brands-docker: fontawesome/brands/docker
  • :fontawesome-brands-github: fontawesome/brands/github
  • :fontawesome-brands-instagram: fontawesome/brands/instagram
  • :fontawesome-brands-linkedin: fontawesome/brands/linkedin
  • :fontawesome-brands-medium: fontawesome/brands/medium
  • :fontawesome-brands-pied-piper-alt: fontawesome/brands/pied-piper-alt
  • :fontawesome-brands-product-hunt: fontawesome/brands/product-hunt
  • :fontawesome-brands-slack: fontawesome/brands/slack
  • :fontawesome-brands-twitter: fontawesome/brands/twitter
link{ #link }

:octicons-milestone-24: Default: none · :octicons-alert-24: Required This field must contain a valid relative or absolute URL including the URI scheme. All URI schemes are supported, including mailto and bitcoin:

=== "Twitter"

``` yaml
extra:
  social:
    - icon: fontawesome/brands/twitter
      link: https://twitter.com/squidfunk
```

=== "Email address"

``` yaml
extra:
  social:
    - icon: fontawesome/solid/paper-plane
      link: mailto:<email-address>
```
name{ #name }

:octicons-milestone-24: Default: domain name from link, if available This field is used as the link's title attribute and can be set to a discernable name to improve accessibility:

extra:
  social:
    - icon: fontawesome/brands/twitter
      link: https://twitter.com/squidfunk
      name: squidfunk on Twitter

:octicons-file-code-24: Source · :octicons-milestone-24: Default: none

A custom copyright banner can be rendered as part of the footer, which is displayed next to the social links. It can be defined as part of mkdocs.yml:

copyright: Copyright &copy; 2016 - 2020 Martin Donath

Remove generator

:octicons-file-code-24: Source · :octicons-heart-fill-24:{ .mdx-heart } Insiders only{ .mdx-insiders }

The footer displays a Made with Material for MkDocs notice to denote how the site was generated. The notice can be removed with the following setting via mkdocs.yml:

extra:
  generator: false

Customization

Custom icons

:octicons-file-code-24: Source · :octicons-mortar-board-24: Difficulty: moderate

The social links feature uses the standard icon integration of Material for MkDocs. If you want to use custom icons, follow the guide explaining how to add additional icons.