mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-11-23 23:21:00 +01:00
Documentation
This commit is contained in:
parent
87d69a95b8
commit
fabc9bd6b8
@ -113,16 +113,16 @@ styles], it's always recommended to add an [additional style sheet] and move
|
||||
declarations into dedicated CSS classes:
|
||||
|
||||
<style>
|
||||
.twitter {
|
||||
color: #1DA1F2;
|
||||
.youtube {
|
||||
color: #EE0F0F;
|
||||
}
|
||||
</style>
|
||||
|
||||
=== ":octicons-file-code-16: `docs/stylesheets/extra.css`"
|
||||
|
||||
``` css
|
||||
.twitter {
|
||||
color: #1DA1F2;
|
||||
.youtube {
|
||||
color: #EE0F0F;
|
||||
}
|
||||
```
|
||||
|
||||
@ -136,12 +136,12 @@ declarations into dedicated CSS classes:
|
||||
After applying the customization, add the CSS class to the icon shortcode:
|
||||
|
||||
``` markdown title="Icon with color"
|
||||
:fontawesome-brands-twitter:{ .twitter }
|
||||
:fontawesome-brands-youtube:{ .youtube }
|
||||
```
|
||||
|
||||
<div class="result" markdown>
|
||||
|
||||
:fontawesome-brands-twitter:{ .twitter }
|
||||
:fontawesome-brands-youtube:{ .youtube }
|
||||
|
||||
</div>
|
||||
|
||||
@ -211,7 +211,7 @@ reference any icon that's [bundled with the theme][icon search] with Jinja's
|
||||
|
||||
``` html
|
||||
<span class="twemoji">
|
||||
{% include ".icons/fontawesome/brands/twitter.svg" %} <!-- (1)! -->
|
||||
{% include ".icons/fontawesome/brands/youtube.svg" %} <!-- (1)! -->
|
||||
</span>
|
||||
```
|
||||
|
||||
@ -219,7 +219,7 @@ reference any icon that's [bundled with the theme][icon search] with Jinja's
|
||||
click on the shortcode to copy it to your clipboard:
|
||||
|
||||
<div class="mdx-iconsearch" data-mdx-component="iconsearch">
|
||||
<input class="md-input md-input--stretch mdx-iconsearch__input" placeholder="Search icon" data-mdx-component="iconsearch-query" value="brands twitter" />
|
||||
<input class="md-input md-input--stretch mdx-iconsearch__input" placeholder="Search icon" data-mdx-component="iconsearch-query" value="brands youtube" />
|
||||
<div class="mdx-iconsearch-result" data-mdx-component="iconsearch-result" data-mdx-mode="file">
|
||||
<div class="mdx-iconsearch-result__meta"></div>
|
||||
<ol class="mdx-iconsearch-result__list"></ol>
|
||||
|
@ -57,18 +57,18 @@ The following properties are available for each link:
|
||||
This property must contain a valid path to any icon bundled with the theme,
|
||||
or the build will not succeed. Some popular choices:
|
||||
|
||||
* :fontawesome-brands-github: – `fontawesome/brands/github`
|
||||
* :fontawesome-brands-gitlab: – `fontawesome/brands/gitlab`
|
||||
* :fontawesome-brands-x-twitter: – `fontawesome/brands/x-twitter`
|
||||
* :fontawesome-brands-mastodon: – `fontawesome/brands/mastodon`
|
||||
<small>automatically adds [`rel=me`][rel=me]</small>
|
||||
* :fontawesome-brands-twitter: – `fontawesome/brands/twitter`
|
||||
* :fontawesome-brands-github: – `fontawesome/brands/github`
|
||||
* :fontawesome-brands-docker: – `fontawesome/brands/docker`
|
||||
* :fontawesome-brands-facebook: – `fontawesome/brands/facebook`
|
||||
* :fontawesome-brands-medium: – `fontawesome/brands/medium`
|
||||
* :fontawesome-brands-instagram: – `fontawesome/brands/instagram`
|
||||
* :fontawesome-brands-linkedin: – `fontawesome/brands/linkedin`
|
||||
* :fontawesome-brands-pied-piper-alt: – `fontawesome/brands/pied-piper-alt`
|
||||
* :fontawesome-brands-slack: – `fontawesome/brands/slack`
|
||||
* :fontawesome-brands-discord: – `fontawesome/brands/discord`
|
||||
* :fontawesome-brands-pied-piper-alt: – `fontawesome/brands/pied-piper-alt`
|
||||
|
||||
<!-- md:option social.link -->
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user