Comment styliser les icônes SVG avec CSS

Utiliser et styliser les icônes SVG dans le module de code Divi

Maintenant, une fois que vous avez copié le code SVG optimisé, vous pouvez simplement le coller dans le module Divi Code et profiter d'icônes d'apparence nette, que vous pouvez cibler et styliser avec CSS! Par exemple, si vous ajoutez un mon-icône Classe CSS dans l'onglet Avancé du module Code, vous pourrez cibler n'importe quel élément de votre SVG dans ce module, en utilisant ce bit de CSS:

.my-icon svg * {
    fill:#121212;
    stroke:#343434;
}

L'étoile "*Le symbole ”est un sélecteur qui sélectionne chaque élément à l'intérieur de l'élément SVG, à l'intérieur de votre module Code. L'exemple de code ci-dessus sera changer à la fois le fond et la couleur du trait, mais en modifiant le sélecteur, vous pouvez cibler les chemins et les formes SVG et changer sa couleur au survol, ou sélectionner uniquement une partie spécifique de l'image SVG (en utilisant des classes CSS supplémentaires sur des éléments individuels).
Notre section de démonstration utilise ce morceau de CSS pour cibler l'icône SVG lors du survol de la colonne (le couleur dl La classe CSS est ajoutée aux paramètres de colonne):

.dl-color:hover .et_pb_code svg * {
    stroke: #242325;
}

Leave a Reply 0 comments

Leave a Reply: