From b1fdfc3cadee46d837321e7133b9859a7cad96ad Mon Sep 17 00:00:00 2001
From: squidfunk <martin.donath@squidfunk.com>
Date: Sun, 26 Jul 2020 17:06:57 +0200
Subject: [PATCH] Added guide for adding colors and animations to icons

---
 docs/reference/icons-emojis.md | 103 ++++++++++++++++++++++++++++++++-
 docs/reference/lists.md        |   2 +-
 2 files changed, 101 insertions(+), 4 deletions(-)

diff --git a/docs/reference/icons-emojis.md b/docs/reference/icons-emojis.md
index f5794491c..da848d398 100644
--- a/docs/reference/icons-emojis.md
+++ b/docs/reference/icons-emojis.md
@@ -46,7 +46,7 @@ about configuration options.
   [8]: https://octicons.github.com/
   [9]: ../setup/changing-the-logo-and-icons.md#additional-icons
 
-### Attribute Lists
+### Attribute List
 
 The [Attribute List][10] extension, which is part of the standard Markdown
 library, allows to __add HTML attributes and classes to Markdown elements__,
@@ -105,6 +105,103 @@ _Result_:
   [15]: https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/material/.icons/fontawesome/regular/laugh-wink.svg
   [16]: https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/material/.icons/octicons/octoface-16.svg
 
-### Using colored icons
+#### with colors
 
-### Using animated icons
+When the [Attribute List][17] extension is enabled, custom CSS classes and
+attributes can be added to icons by suffixing the icon with a special syntax.
+While HTML and CSS allow to use [inline styles][18], it's always best to add
+an [additional stylesheet][19] and put styles into dedicated CSS classes:
+
+``` css
+.medium {
+  color: #00AB6C;
+}
+.twitter {
+  color: #1DA1F2;
+}
+.facebook {
+  color: #4267B2;
+}
+```
+
+Then, add the CSS classes to the icons:
+
+<style>
+  .medium {
+    color: #00AB6C;
+  }
+  .twitter {
+    color: #1DA1F2;
+  }
+  .facebook {
+    color: #4267B2;
+  }
+</style>
+
+_Example_:
+
+``` markdown
+- :fontawesome-brands-medium:{: .medium } – Medium
+- :fontawesome-brands-twitter:{: .twitter } – Twitter
+- :fontawesome-brands-facebook:{: .facebook } – Facebook
+```
+
+_Result_:
+
+- :fontawesome-brands-medium:{: .medium } – Medium
+- :fontawesome-brands-twitter:{: .twitter } – Twitter
+- :fontawesome-brands-facebook:{: .facebook } – Facebook
+
+  [17]: #attribute-list
+  [18]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style
+  [19]: ../customization.md#additional-stylesheets
+
+#### with animations
+
+Similar to adding [colors][20], it's just as easy to add [CSS animations][21] to
+icons by using an [additional stylesheet][6], defining a `#!css @keyframes` rule
+and adding the dedicated CSS class to the icon:
+
+``` css
+@keyframes heart {
+  0%, 40%, 80%, 100% {
+    transform: scale(1);
+  }
+  20%, 60% {
+    transform: scale(1.15);
+  }
+}
+.heart {
+  color: #E91E63;
+  animation: heart 1000ms infinite;
+}
+```
+
+Then, add the CSS class to the icon:
+
+<style>
+  @keyframes heart {
+    0%, 40%, 80%, 100% {
+      transform: scale(1);
+    }
+    20%, 60% {
+      transform: scale(1.15);
+    }
+  }
+  .heart {
+    animation: heart 1000ms infinite;
+  }
+</style>
+
+_Example_:
+
+``` markdown
+:octicons-heart-fill-24:{: .heart }
+```
+
+_Result_:
+
+:octicons-heart-fill-24:{: .heart }
+
+  [20]: #with-colors
+  [21]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation
diff --git a/docs/reference/lists.md b/docs/reference/lists.md
index 1379af72b..fcd4b5a36 100644
--- a/docs/reference/lists.md
+++ b/docs/reference/lists.md
@@ -11,7 +11,7 @@ are supported through extensions.
 
 ## Configuration
 
-### Definition Lists
+### Definition List
 
 [:octicons-file-code-24: Source][1] · [:octicons-workflow-24: Extension][2]