web-dev-qa-db-fra.com

Empêcher la traduction svg de fontawesome

J'ai un problème avec angular et police impressionnante. Lors de la première génération de la liste des icônes, toutes les icônes basées sur la classe css sont soudainement traduites en svg. Cela n'affecte que les icônes solides. Par exemple:

<i class="fas fa-2x fa-minus-square"></i>

est traduit en quelque sorte par

<svg _ngcontent-c16="" class="svg-inline--fa fa-minus-square fa-w-14 fa-2x"
 ng-reflect-ng-class="fas fa-2x fa-minus-square" aria-hidden="true" data-prefix="fas" data-icon="minus-square"
 role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
    <path fill="currentColor"
      d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM92 296c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6 0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H92z">
    </path>
</svg>
<!-- <i _ngcontent-c16="" class="fas fa-2x fa-minus-square" ng-reflect-ng-class="fas fa-2x fa-minus-square"></i> -->

Y a-t-il une option qui peut empêcher cette situation? Forcer en quelque sorte la traduction?

Cela peut être problématique. Par exemple, je ne peux pas utiliser d'icônes solides :(

angularsvgfont-awesome-5
14
Paweł Domański

Si vous souhaitez que Font Awesome ne remplace pas automatiquement <i> balises qui ressemblent à des icônes avec le <svg>s, vous pouvez changer la configuration pour désactiver autoReplaceSvg.

Si vous chargez via <script> tag, qui pourrait ressembler à ceci (assurez-vous de faire la configuration avant de charger Font Awesome):

  <head>
    <script type="text/javascript">
      // Notice how this gets configured before we load Font Awesome
      window.FontAwesomeConfig = { autoReplaceSvg: false }
    </script>
    <script src="fontawesome.js"></script>
    <script src="fa-solid.js"></script>
  </head>

Ou si vous créez votre propre bundle et pouvez accéder à la configuration à partir de votre propre script, vous pouvez le faire:

import fontawesome from '@fortawesome/fontawesome'

fontawesome.config = { autoReplaceSvg: false }
14
mwilkerson

J'ai eu le même problème, la balise icône a été effectivement traduite en SVG lorsque j'ai inspecté l'élément.

Le problème était que je chargeais fontawesome via les appels CSS et JS. Lorsque j'ai supprimé l'appel à la bibliothèque JS et que j'ai uniquement appelé le fichier CSS, les icônes s'affichent correctement.

11
S.Simeonov