mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
94 lines
3.2 KiB
Markdown
94 lines
3.2 KiB
Markdown
|
---
|
|||
|
|
template: overrides/main.html
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# Icons + Emojis
|
|||
|
|
|
|||
|
|
One of the best features of Material for MkDocs is the possibility to use [more
|
|||
|
|
than _7.000 icons_][1] and _thousands of emojis_ in your project documentation
|
|||
|
|
with practically zero additional effort. Furthermore, custom icons can be used
|
|||
|
|
in `mkdocs.yml`, documents and templates.
|
|||
|
|
|
|||
|
|
## Configuration
|
|||
|
|
|
|||
|
|
### Emoji
|
|||
|
|
|
|||
|
|
[:octicons-file-code-24: Source][2] · [:octicons-workflow-24: Extension][3]
|
|||
|
|
|
|||
|
|
The [Emoji][3] extension, which is part of [Python Markdown Extensions][4],
|
|||
|
|
adds the ability to __integrate emojis and icons__ in the `*.svg` file format,
|
|||
|
|
which are inlined when [building your site][5]:
|
|||
|
|
|
|||
|
|
``` yaml
|
|||
|
|
markdown_extensions:
|
|||
|
|
- pymdownx.emoji:
|
|||
|
|
emoji_index: !!python/name:materialx.emoji.twemoji
|
|||
|
|
emoji_generator: !!python/name:materialx.emoji.to_svg
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
The following icon sets are bundled with Material for MkDocs:
|
|||
|
|
|
|||
|
|
* :material-material-design: – [Material Design][6]
|
|||
|
|
* :fontawesome-brands-font-awesome-flag: – [FontAwesome][7]
|
|||
|
|
* :octicons-mark-github-16: – [Octicons][8]
|
|||
|
|
|
|||
|
|
You can also add [additional icons][9]. When using emojis, it's recommended to
|
|||
|
|
consult the official documentation of [Python Markdown Extensions][3] to learn
|
|||
|
|
about configuration options.
|
|||
|
|
|
|||
|
|
[1]: https://github.com/squidfunk/mkdocs-material/tree/master/material/.icons
|
|||
|
|
[2]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/extensions/pymdownx/_emoji.scss
|
|||
|
|
[3]: https://facelessuser.github.io/pymdown-extensions/extensions/emoji/
|
|||
|
|
[4]: https://facelessuser.github.io/pymdown-extensions/
|
|||
|
|
[5]: ../creating-your-site.md#building-your-site
|
|||
|
|
[6]: https://materialdesignicons.com/
|
|||
|
|
[7]: https://fontawesome.com/icons?d=gallery&m=free
|
|||
|
|
[8]: https://octicons.github.com/
|
|||
|
|
[9]: ../setup/changing-the-logo-and-icons.md#additional-icons
|
|||
|
|
|
|||
|
|
## Usage
|
|||
|
|
|
|||
|
|
### Using emojis
|
|||
|
|
|
|||
|
|
Emojis can be integrated in Markdown by putting the shortcode of the emoji
|
|||
|
|
between two colons. If you're using [Twemoji][10] (recommended), you can look up
|
|||
|
|
the shortcodes at [Emojipedia][11].
|
|||
|
|
|
|||
|
|
_Example_:
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
:smile:
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
_Result_:
|
|||
|
|
|
|||
|
|
:smile:
|
|||
|
|
|
|||
|
|
[10]: https://twemoji.twitter.com/
|
|||
|
|
[11]: https://emojipedia.org/twitter/
|
|||
|
|
|
|||
|
|
### Using icons
|
|||
|
|
|
|||
|
|
When [Emoji][12] is enabled, icons can be used similar to emojis, by referencing
|
|||
|
|
a valid path to any icon bundled with the theme, which are located in the
|
|||
|
|
[`.icons`][1] directory, and replacing `/` with `-`:
|
|||
|
|
|
|||
|
|
_Example_:
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
* :material-account-circle: – `.icons/material/account-circle.svg`
|
|||
|
|
* :fontawesome-regular-laugh-wink: – `.icons/fontawesome/regular/laugh-wink.svg`
|
|||
|
|
* :octicons-octoface-16: – `.icons/octicons/octoface-16.svg`
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
_Result_:
|
|||
|
|
|
|||
|
|
* :material-account-circle: – [`.icons/material/account-circle.svg`][13]
|
|||
|
|
* :fontawesome-regular-laugh-wink: – [`.icons/fontawesome/regular/laugh-wink.svg`][14]
|
|||
|
|
* :octicons-octoface-16: – [`.icons/octicons/octoface-16.svg`][15]
|
|||
|
|
|
|||
|
|
[12]: #emoji
|
|||
|
|
[13]: https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/material/.icons/material/account-circle.svg
|
|||
|
|
[14]: https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/material/.icons/fontawesome/regular/laugh-wink.svg
|
|||
|
|
[15]: https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/material/.icons/octicons/octoface-16.svg
|