document iconocards plugin

docs/index.md

@@ -9,6 +9,7 @@ using Font Awesome Pro icons in your site as easy as using Font Awesome Free ico
 And with support for Font Awesome Kits[^2], using your own custom icons is just as simple.
 
 [^1]: https://squidfunk.github.io/mkdocs-material/reference/icons-emojis/
+[^2]: https://fontawesome.com/docs/web/setup/use-kit
 
 ??? question "Material for MkDocs already has a mechanism for [adding custom icons](https://squidfunk.github.io/mkdocs-material/setup/changing-the-logo-and-icons/?h=bootstrap#additional-icons). Why do I need Iconoclast?"
 
@@ -145,6 +146,28 @@ The simplest possible configuration is just adding the `iconoclast` plugin to `m
 You can now use Font Awesome Pro icons in Markdown files just as you would Font Awesome Free icons. For example,
 `:fontawesome-duotone-icons:` will now render as :fontawesome-duotone-icons:.
 
+### Social Cards
+
+Iconoclast's `iconocards` plugin is **required** to use Iconoclast icons in social cards generated by Material for
+MkDocs' built-in social plugin.[^3]
+
+[^3]: https://squidfunk.github.io/mkdocs-material/setup/setting-up-social-cards/
+
+To use `iconocards`, you must **remove** the built-in social plugin from `mkdocs.yml`. Don't worry — `iconocards` is
+fully backwards-compatible with the built-in social plugin; you won't lose any functionality.
+
+=== ":octicons-file-code-16: `mkdocs.yml`"
+
+    ```yaml
+    plugins:
+        - iconoclast
+        - iconocards # (1)!
+    ```
+
+    1. `iconocards` **must** be declared *after* `iconoclast`.
+
+`iconocards` supports all [configuration options](https://squidfunk.github.io/mkdocs-material/setup/setting-up-social-cards/?h=social#built-in-social-plugin) of the built-in social plugin.
+
 ### CSS Support
 
 If you want to use Font Awesome icons when [overriding blocks or partials](https://squidfunk.github.io/mkdocs-material/customization/#overriding-partials),
@@ -171,8 +194,6 @@ You can do this via the following configuration option:
 Have a Font Awesome Kit[^2] with custom icons that you'd like
 to use in your project? Iconoclast has you covered.
 
-[^2]: https://fontawesome.com/docs/web/setup/use-kit
-
 To use a Kit, you'll have to set up the following configuration options:
 
 <div class="annotate" markdown>
@@ -264,8 +285,8 @@ If you've enabled [CSS Support](#css-support), you can also reference your custo
 
 !!! warning "Using CSS with Kits counts against your pageviews"
 
-    Font Awesome allots you a certain number of Kit pageviews per month.[^3] If you use Iconoclast's CSS support with a
+    Font Awesome allots you a certain number of Kit pageviews per month.[^4] If you use Iconoclast's CSS support with a
     Kit, Iconoclast will serve your CSS via Font Awesome's CDN rather than bundling it with your site, which means that
     every time someone visits your site, it will count against your pageviews.
 
-[^3]: https://fontawesome.com/docs/web/setup/use-kit#kits-and-pageviews
+[^4]: https://fontawesome.com/docs/web/setup/use-kit#kits-and-pageviews