How to insert font-awesome icons in MathJax?

Question

I want to write a formular with MathJax where I use a font-awesome icon as a replacement for an mathematical symbol.

If I try something like

$$6 \cdot <i class="fa fa-home" aria-hidden="true"></i> + 5 \cdot <i class="fa fa-home" aria-hidden="true"></i>$$

I get

Is there an easy way to get font-awesome icons integrated in MathJax?

Answer 1

If you can ensure an HTML-based output, you can use MathJax's non-standard \class{classname}{math} macro as below.

Note that this won't work in the SVG output (without additional hacks anyway).

script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML-full';
document.getElementsByTagName('head')[0].appendChild(script);

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

<h1>Using fontawesome in math</h1>

$$ f: \class{fa fa-twitter}{} \to \class{fa fa-home}{}$$