mkdocs-material/docs/setup/adding-social-links.md

template
overrides/main.html

Adding social links

The footer of your project documentation is a good 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

Social links

: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

Customization

Custom icons

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

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