1
0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-28 01:10:58 +01:00
mkdocs-material/docs/setup/adding-social-links.md

105 lines
3.4 KiB
Markdown
Raw Normal View History

2020-07-21 16:01:22 +02:00
---
template: overrides/main.html
---
# Adding social links
2020-07-26 14:46:09 +02:00
The footer of your project documentation is a great place to add links to
2020-07-21 16:01:22 +02:00
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`.
2020-07-21 16:01:22 +02:00
## Configuration
2020-07-22 09:54:17 +02:00
### Social links
2020-07-21 16:01:22 +02:00
[:octicons-file-code-24: Source][1] ·
: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:
``` yaml
extra:
social:
- icon: fontawesome/brands/twitter
link: https://twitter.com/squidfunk
```
For each entry, the following fields are available:
2020-07-22 14:05:07 +02:00
`icon`{: #icon }
2020-07-21 16:01:22 +02:00
: :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][2], or the build will not succeed. Some popular choices:
2020-07-27 12:05:07 +02:00
* :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`
2020-07-21 16:01:22 +02:00
[1]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/social.html
[2]: https://github.com/squidfunk/mkdocs-material/tree/master/material/.icons
2020-07-22 14:05:07 +02:00
`link`{: #link }
2020-07-21 16:01:22 +02:00
: :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
2020-07-21 18:42:19 +02:00
link: mailto:<email-address>
2020-07-21 16:01:22 +02:00
```
2020-07-22 14:05:07 +02:00
`name`{: #name }
2020-07-21 16:01:22 +02:00
2020-07-22 09:54:17 +02:00
: :octicons-milestone-24: Default: _domain name from_ `link`_, if available_
2020-07-21 16:01:22 +02:00
This field is used as the link's `title` attribute and can be set to a
discernable name to improve accessibility:
``` yaml
extra:
social:
- icon: fontawesome/brands/twitter
link: https://twitter.com/squidfunk
name: squidfunk on Twitter
```
## Customization
### Custom icons
[:octicons-file-code-24: Source][2] ·
:octicons-mortar-board-24: Difficulty: _moderate_
2020-07-24 14:30:03 +02:00
The social links feature uses the standard [icon integration][3] of Material for
MkDocs. If you want to use custom icons, follow the guide explaining how to
add [additional icons][4].
[3]: changing-the-logo-and-icons.md#icons
[4]: changing-the-logo-and-icons.md#additional-icons