Font Awesome ne fonctionne pas dans mon DOM shadow car j'ai les éléments suivants pour empêcher les styles de fuir et out:
:host {
all: initial; /* 1st rule so subsequent properties are reset. */
display: block;
contain: content; /* Boom. CSS containment FTW. */
}
Je peux utiliser d'autres feuilles de style en les insérant simplement dans la propriété : host , mais cela ne fonctionne pas avec Font Awesome car il utilise des chemins relatifs dans sa feuille de style.
J'ai trouvé ce post et l'ai essayé avec le CSS à portée que j'ai implémenté, mais les icônes s'affichent sous forme de carrés, comme on peut le voir dans mon exemple .
Récupérez le fichier, remplacez les chemins par une expression rationnelle, insérez-le.
Merci! c'est une bonne stratégie de force brute, mais j'attendrai de voir si quelqu'un peut m'aider à le lier en premier.
Eh bien, puisqu'il s'agit d'une extension que vous écrivez, vous pouvez probablement rediriger les URL incorrectes en utilisant chrome.webRequest.onBeforeRequest. OTOH ils peuvent ressembler à ceux valides de la page Web ...
Qu'en est-il de la création de Font-Awesome vous-même et de la personnalisation de la sortie comme vous le souhaitez?
Vous avez oublié d'ajouter le dans la portée globale
Et le @import () ne doit pas être placé dans la règle, mais directement dans l'élément