0

i'm learning ShadowDOM and facing this weird import issue. Without shadowDOM my icon appears on the screen but inside the shadowDOM it appears as box. I'm not sure what i'm doing wrong. Please guide me.

This works.

<style>
    @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
</style>

<i class="fa fa-arrow-left" aria-hidden="true"></i>

This does not.

<div id="root">root</div>

<script>
    let root = document.getElementById('root').createShadowRoot();
    root.innerHTML = `
        <style>
            @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
        </style>

        <i class="fa fa-arrow-left" aria-hidden="true"></i>
    `;
</script>
Zayn Ali
  • 4,765
  • 1
  • 30
  • 40

1 Answers1

0

For the imported font to be defined, you must also include the CSS file in the main document header:

<link rel="stylesheet" href="font-awesome.css">

See a working example in this answer on SO.

Community
  • 1
  • 1
Supersharp
  • 29,002
  • 9
  • 92
  • 134