Page Builder CK - SVG icons for Joomla

Si vous souhaitez utiliser des icônes dans votre page, vous pouvez choisir 2 façons de le faire :

  • Charger une police d'icônes avec CSS (par exemple Fontawesome comme police) et utiliser des classes CSS pour afficher les icônes
  • Charger le code SVG de l'icône dans la page HTML

 

Alors que faire ? Quel est le meilleur ?

Cas 1 : Si vous utilisez déjà une police d'icônes telle que Fontawesome dans votre site Web à d'autres fins, vous pouvez continuer à l'utiliser. Il n'y aura pas de charge supplémentaire.

Cas 2 : Si vous n'utilisez pas encore une police d'icônes, vous devriez plutôt utiliser les icônes SVG.

 

Faire quelques tests avec Google Pagespeed nous donne une indication : utiliser le code SVG est mieux que d'utiliser une bibliothèque de polices, surtout si vous n'avez que quelques icônes à afficher dans vos pages. Si vous créez une interface utilisateur, l'utilisation de la bibliothèque de polices serait bien meilleure.

 

REMARQUE IMPORTANTE: Fontawesome est également basé sur des icônes SVG. Nous ne discutons pas "utiliser Fontawesome ou pas", nous discutons de "charger la bibliothèque complète en utilisant CSS, ou juste les icônes dont nous avons besoin en tant que code SVG". Dans les deux cas, vous pouvez utiliser les icônes Fontawesome.

 

 

 

Charger l'icône SVG

 

Cliquez sur le bouton Sélectionner pour ouvrir la fenêtre contextuelle dans laquelle vous pouvez sélectionner votre icône.

select svg icon

Cliquez sur n'importe quel bouton de bibliothèque d'icônes SVG, dans l'exemple ci-dessus, dirons que nous cliquons sur Heroicons - Outline.

select svg icon popup

Il ajoutera automatiquement l'icône à l'endroit que vous éditez (dans cet exemple, un bouton). C'est à ça que ça ressemble :

svg icon result default

Ensuite, vous pouvez jouer avec les paramètres de l'icône, du bouton, etc. pour obtenir le résultat souhaité. Vous pouvez gérer

  • la taille de l'icône
  • la taille du trait
  • la couleur du trait : normale et au survol de la souris
  • la couleur de remplissage : normale et au survol de la souris
  • la position de l'icône

 

 

Voici un exemple des paramètres d'icône pour l'addon Bouton:

svg icon settings custom

Et un bouton personnalisé avec l'icône SVG et quelques styles:

svg icon result custom

Télécharger Page Builder CK

Newsletter

Outil de création rapide, puissant et responsive.

En savoir plus

Extensions favorites

logo maximenuck 110 logo pagebuilderck 110 logo slideshowck 110template creator ck large 449