Comment intégrer des icônes Font Awesome dans des images SVG ?

Comment incorporer des icônes Font Awesome dans des images SVG

Vous pouvez rencontrer des difficultés lorsque vous essayez de remplacer des références d'image par des icônes Font Awesome dans des fichiers SVG en utilisant la syntaxe suivante :

<g><i>

Le sous-jacent Cause

La balise n'est pas reconnue comme un élément SVG valide. Au lieu de cela, vous devez inclure le caractère Unicode réel qui restitue l'icône souhaitée.

Obtention du caractère Unicode

Pour acquérir le caractère Unicode, reportez-vous à la feuille de style de Font Awesome, où chaque icône est représentée par une valeur hexadécimale entourée de f caractères, comme f0c0 pour l'icône du nuage. Mais en SVG, la syntaxe doit être adaptée : remplacez f0c0 par .

Exemple de syntaxe

La syntaxe ajustée pour inclure une icône de nuage en SVG serait :

<g><text x="12" y="15">&#xf0c2;</text></g>

Considérations de style

Pour assurez-vous que l'icône est visible, ajoutez la règle CSS suivante à votre feuille de style :

svg text {
   font-family: FontAwesome;
}

Remarque pour Font Awesome 5 Free

Si vous utilisez la version gratuite de Font Awesome 5 ou supérieur, la déclaration font-family doit être mise à jour comme suit :

svg text {
   font-family: 'Font Awesome 5 Free';
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!