Font Awesome 5.11.2 not rendering in iFrame but rendering on home page

Question

I am having a problem with Font Awesome that I am scratching my head about. I've tried various versions of CDN's and versions, but I now have it installed on my local server, version 5.11.2. Kind of annoying to have to make changes with different versions of Font Awesome.

<link href="/css/fontawesome/all.css" rel="stylesheet">

along with the webfonts folder in the correct location.

The markup that I have is:

<a href="#"><i class="icon-facebook2"></i></a>
<a href="#"><i class="icon-twitter2"></i></a>
<a href="#"><i class="icon-yahoo2"></i></i></a>
<a href="#"><i class="icon-google2"></i></a>

I have that on both my home page and on an iFrame that I load somewhere else on the site.

The icons render fine on the home page, but in the iFrame they do not render at all. The HTML is there because there is a link still there. There are not even the little square that you see sometimes.

I tried commenting out the link for fontawesome in the iFrame and that does nothing. BTW, I sort of forgot if I need to load the JS and CSS libraries for an iframe if they got loaded in the parent, although I am not sure that is the problem.

If I use:

<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-yahoo"></i></a></li>
<li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>

on the home page & the iframe, then they both work, but still perplexed about why the other code works on the home page and not in the iframe.

Answer 1

The refence to the fontawesome stylesheet needs to be injected into the iframe. Like so:

  $("#iframe_id").contents().find('body').append("<link rel='stylesheet' href='https://pro.fontawesome.com/releases/v5.10.0/css/all.css' integrity='sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p' crossorigin='anonymous' />");

The above code will work using this CDN reference -- might need to experiment if really want to use a local server reference to the stylesheet.