Support for FontAwesome Icons on MARP preview

[Saptarshi-max]

This has been a highly productive VSCode extension for me, and perfect for developing presentations a Big thanks for building this amazing platform to the authors.

Recently for a presentation, I needed some Icons in my slides. The is a big repository of icons few of which I will be using for my slides. To import Fontawesome icons on a generic Markdown file, The following HTML code can be copy-pasted

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

and wherever I will like to put in my icon of choice I need to use another HTML snippet.

<h4><i class="fa fa-flag" aria-hidden="true"></i> One Font, 675 Icons, and add other texts here</h4>

Where fa-flag is the name of the icon I wanted to import. But in VSCode, even with the HTML code execution enabled the MARP preview is unable to display these icons. However, these icons are perfectly imported on the final 'pdf' output of the 'Export slide deck'. Is there any way I can see the FontAwesome Icons on the MARP slide preview beforehand ? ... Visualizing the Icons only on the final slide pdf output and not on the preview itself is very time consuming

[yhatt]

VS Code preview looks like sanitizing <link> tag due to some security reason.

Instead, you can import the external CSS by @import rule within inline style (<style> tag for tweaking theme CSS).

<style>
@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
</style>

[Saptarshi-max]

Awesome, It works now.
Thank you so much for your quick response.

[majkinetor]

Doesn't work when slide is exported to HTML. The one without @import works.

[KhaaL]

#83

For everyone else who might've tried this solution without success: make sure to close the preview pane and re-enable the "Toggle Marp Feature for current markdown" from the Marp icon in VScode.

Also, make sure to enable Markdown › Marp: Enable HTML

Took me days of troubleshooting 🤦🏽‍

@yhatt, is it possible to use the new FA fonts in Marp? I tried with this CDN, but I only got blank blocks in the renderer.

https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css

---

[yhatt]

@KhaaL CSS file you've presented looks like no references to any Web font resources (@font-face). You can use https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css instead.

[KhaaL]

Thank you for the prompt response (and all the awesome work in this project) 🙂

[josethz00]

thank you! this does the trick

[kazumatu981]

[FYI]: I was released markdow-it plugin for marp markdown-it-fontawesome.

@kazumatu981/markdown-it-fontawesome - npm

To use this, you can write easier decks inclueing Fontawesome icons.
Please Enjoy.

[Saptarshi-max]

Thank you for sharing!