Markdown Monster can easily embed FontAwesome icons into your Markdown text. If your target site's styles load FontAwesome you can take advantage of MM's simplified FontAwesome embedding.

To add a FontAwesome Icon simply use the @ icon-iconName shortcut to embed the icon. For example, the following adds FontAwesome's round circle info icon into the text below:

Markdown Monster Specific Feature

This format is a custom extension that is not supported outside of Markdown Monster, or tools that use its markdown engine. You can generate HTML and PDF output from MM or publish HTML to a Weblog from this output, but it will not render by default in hosted services like GitHub. A custom code implementation along with a .NET based Markdown parser that includes this RenderExtension, for handling the conversion is provided below.

> #### @ icon-info-circle Notice
> blah blah blah

which produces:

Notice

blah blah blah

Notice the icon info icon which is embedded by the @ icon-info-circle syntax, which is responsible for the embedded icon.

Here's another example:

Click on the @ icon-camera icon to take a screen shot.

which produces:

To insert a FontAwesome Icon, simple use @ icon- followed by the FontAwesome Icon name which you can find on the FontAwesome web site.

All of Markdown Monster's Preview styles include FontAwesome styles so the preview and exported documents will always include the FontAwesome icons.

More sophisticated Icon Usage via HTML

You can also use more sophisticated icon displays, like rotations for example, but for those you have to use HTML markup:

> #### <i class="fa fa-gear fa-spin fa-2x" style="color: firebrick"></i> Configuration
> Configuration can be launched from the **Tools -> Settings** menu option.

which produces:

Configuration

Configuration can be launched from the Tools → Settings menu option.

Icons are a great way for callouts or quote blocks, as they can make content more visually interesting. But don't overuse these icons and use them consistently on your sites and documentation.

Requires FontAwesome on your Site

It's important to understand that FontAwesome Icons only work if FontAwesome is loaded into the HTML page. Markdown Monster's preview themes all include FontAwesome on the preview page, but your target Web site or documentation may not include it, in which case the icons will not render.

Make sure that FontAwesome is available on your output target before using this feature.

Font Customizations

There are several additional FontAwesome Style Extensions that you can apply to your embeddings via - directives.

• Font styles (@ icon-solid, @ icon-duotone, @ icon-light, @ icon-regular)
• Font color (-color:gold)
• Spinning icons (-spin)

Example:

@ icon-duotone-spinner-spin-color:steelblue Spin me up!

Spin me up!

IMPORTANT: Custom Extension!

These features are a custom Render Extension that Markdown Monster provides and that are not supported by most hosting services.

It works for:

• Markdown Monster Preview
• Markdown Monster HTML output
• Markdown Monster PDF Output
• Westwind.AspnetCore.Markdown rendering (.NET)

FontAwesome Extension Parsing Implementation Code

The rendering format is implemented as follows and can be easily implemented as a Markdown pre-processor as demonstrated by the RenderExtension implementation that takes the Markdown text as input (in args.Markdown in the sample code):

public class FontAwesomeRenderExtension : IMarkdownRenderExtension
{
    public string Name { get; set; } = "FontAwesomeRenderExtension";

    static Regex fontAwesomeIconRegEx = new Regex(@"<i class="fas fa-" style="font-size: 1.1em"></i> .*?[\s|\.|\,|\<]");

    public void BeforeMarkdownRendered(ModifyMarkdownArguments args)
    {
        var md = args.Markdown;

        var matches = fontAwesomeIconRegEx.Matches(md);
        foreach (Match match in matches)
        {
            string iconblock = match.Value.Substring(0, match.Value.Length - 1);

            string faPrefix = "fas";
            string icon = null;
            if (iconblock.StartsWith("<i class="fas fa-" style="font-size: 1.1em"></i> regular-"))
            {
                faPrefix = "far";
                icon = iconblock.Replace("<i class="fas fa-" style="font-size: 1.1em"></i> regular-", "");
            }
            else if (iconblock.StartsWith("<i class="fas fa-" style="font-size: 1.1em"></i> duotone-"))
            {
                faPrefix = "fad";
                icon = iconblock.Replace("<i class="fas fa-" style="font-size: 1.1em"></i> duotone-", "");
            }
            else if (iconblock.StartsWith("<i class="fas fa-" style="font-size: 1.1em"></i> solid-"))
            {
                faPrefix = "fas";
                icon = iconblock.Replace("<i class="fas fa-" style="font-size: 1.1em"></i> solid-", "");
            }
            else if (iconblock.StartsWith("<i class="fas fa-" style="font-size: 1.1em"></i> light-"))
            {
                faPrefix = "fal";
                icon = iconblock.Replace("<i class="fas fa-" style="font-size: 1.1em"></i> light-", "");
            }
            else
            {
                faPrefix = "fas";
                icon = iconblock.Replace("<i class="fas fa-" style="font-size: 1.1em"></i> ", "");
            }


            string color = null;         
            var idx = icon.IndexOf("-color:");
            if (idx > 0)
            {
                var extr = Westwind.Utilities.StringUtils.ExtractString(icon, "-color:", "-", caseSensitive: false, allowMissingEndDelimiter: true, returnDelimiters: true);
                color = Westwind.Utilities.StringUtils.ExtractString(extr, "-color:", "-", caseSensitive: false, allowMissingEndDelimiter: true, returnDelimiters: false);
                if (!string.IsNullOrEmpty(color))
                {
                    color = $";color: {color}";
                    icon = icon.Replace(extr.TrimEnd('-'), string.Empty);
                }
            }


            if (iconblock.EndsWith("-spin") || iconblock.Contains("-spin-"))
                icon = icon.Replace("-spin", " fa-spin ");

            md = md.Replace(iconblock, $"<i class=\"{faPrefix} fa-" + icon + $"\" style=\"font-size: 1.1em{color}\"></i> ");
        }

        if (md != args.Markdown)
            args.Markdown = md;
    }

    public void AfterMarkdownRendered(ModifyHtmlAndHeadersArguments args)
    { }

    public void AfterDocumentRendered(ModifyHtmlArguments args)
    { }

}