Custom Callout Icons

Emojis are already a pretty good starting point as default icon options go! There are a lot of emojis, which are supported across nearly all platforms. But what if we're going for a different look, or need to match our docs to a branding kit? Icons are a big part of setting the "tone" for your site! With a touch of Custom CSS, we should be able to get the callout's 📷 emoji to display as an icon font glyph!

.callout[theme=📷] {
  --emoji: unset;
  --icon: "\f083"; /* copied front FontAwesome */
  --icon-color: #c50a50;
}

> 📷 Cool pix!
>
> Vitae reprehenderit at aliquid error voluptates eum dignissimos.

This works like a charm:

📸

Cool pix!

Vitae reprehenderit at aliquid error voluptates eum dignissimos.

.callout[theme=📷] {
  --icon-font-family: FontAwesome; /* copied from https://fontawesome.com/v4.7.0/icon/camera-retro */
}