Unable to use Font Awesome Icons inside of the Canvas

I actually discovered the problem halfway through writing the post but decided to finish it and leave it here in case anyone ran into this.

The styles used for panels, blocks, etc don't apply to the styles inside of the canvas, since the canvas is in an iframe. The problem was that I hadn't installed Font Awesome's CSS inside of the canvas (but had in my outer application, which is why it was working for blocks).

You can do this in the init:

 grapesjs.init({
  .. // other stuf
    canvas: {
          // any  style sheets here are imported and used for the canvas ONLY
            styles: [
              "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
            ]
   },
 
 // and anything inside the baseCSS is included in a <styles> tag inside the canvas, 
 // allowing you to specify inline styles
  baseCss: ` random CSS styles`
}

Also - if you want to change the appearance of items inside of the canvas, you can include inline styles using the baseCSS property.

Thanks, Andrew