web-dev-qa-db-fra.com

Police Awesome 5 (avec CSS) fa-layers

Je suis passé à Font Awesome 5 (FA 5) à partir de la version 4.7. La raison en était les icônes en couches . Dans la FA 4.7, les classes fa-stack étaient utilisées. Dans FA 5, les couches fa sont beaucoup plus puissantes.

Le problème, autant que je vois, fa-layers ne sont implémentés que dans la version js pure de Font Awesome. (en utilisant fontawesome-all.js). Si vous souhaitez utiliser la version css, vous ne voyez aucune classe fa-layers dans la structure de dossiers (dans la version actuelle de la version 5.0.8). Est-il possible d'utiliser des couches de fa avec la version CSS de FA 5? 

Par version css je veux dire ceci:

<head>
  <!--core first + styles last-->
  <link href="/static/fontawesome/fontawesome-all.css" rel="stylesheet">
</head>

Bt Js version, je veux dire ceci:

<head>
  <!--load everything-->
  <script defer src="/static/fontawesome/fontawesome-all.js"></script>
</head>

Puisque fontawesome-all.js a remplacé toutes les balises i en svg, la manipulation de css est difficile avec cette version. Donc, si la version css possède toutes les fonctionnalités de la version Js, j'aimerais la version css de FA 5.

font-awesome-5
7
Atilla Baspinar

Non, les polices Web avec CSS ne possèdent pas toutes les fonctionnalités de SVG avec JS. La page Comment utiliser SVG avec JS présente certaines des fonctionnalités nouvelles ou exclusives à SVG avec JS. Les couches , en particulier, sont nouvelles dans SVG avec JS:

Les calques sont le nouveau moyen de placer des icônes et du texte visuellement au-dessus de chaque autre, remplaçant nos piles d’icônes classiques.

Vous pouvez toujours utiliser des piles dans Webfonts avec CSS pour faire des choses intéressantes: exemple codepen

<span class="fa-stack fa-2x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fal fa-circle fa-2x fa-stack-1x fa-inverse"></i>
  <i class="far fa-triangle fa-stack-1x fa-inverse"></i>
</span>

Mais les piles ne sont certainement pas aussi puissantes que les couches avec des transformations de puissance, qui ne sont disponibles qu'en SVG avec JS.

4
mwilkerson

Je préfère également utiliser la version Web Fonts, principalement pour des raisons de performances. Je souhaitais également utiliser les icônes en couches les plus avancées avec la classe fa-layers.

J'ai recréé une partie de la fonctionnalité fa-layers en CSS et mis la feuille de style up sur GitHub . Ce n'est pas parfait ou complet. J'y travaille encore, mais cela pourrait vous aider à récupérer certaines des fonctionnalités manquantes sans quitter les polices Web et CSS.

1
dangowans