Icônes CSS avec exemples-tutoriel CSS-php.cn

CSS Icons with examples

Icônes CSS

Les icônes peuvent facilement être ajoutées à notre page HTML, en utilisant une bibliothèque d'icônes.

Comment ajouter des icônes

Le moyen le plus simple d'ajouter une icône à votre page HTML consiste à utiliser une bibliothèque d'icônes, telle que Font Awesome.
Ajoutez le nom de la classe d'icônes spécifiée à n'importe quel élément HTML en ligne (commeou).
Les icônes CSS sont des symboles ou des représentations graphiques créées à l'aide de
CSS (Cascading Style Sheets) plutôt que les formats d'image traditionnels comme PNG ou SVG.
Ils sont souvent utilisés dans la conception de sites Web pour ajouter des éléments visuels à un site Web sans recourir à des fichiers image.
Il existe quelques méthodes courantes pour créer des icônes CSS :

Icônes de police :
Ce sont des icônes créées à partir de polices d'icônes spéciales telles que Font Awesome, Material Icons ou Ion. Ces polices contiennent un ensemble de glyphes (symboles) qui peuvent être stylisés avec CSS.
Par exemple
vous pouvez utiliser une classe comme .fa-heart pour ajouter une icône en forme de cœur à votre HTML, puis la styliser avec les propriétés CSS.
Formes CSS :
Les icônes peuvent être créées en utilisant du CSS pur en stylisant les éléments HTML (comme

, , etc.) avec des propriétés CSS telles que border, border-radius, background et transform. Cette méthode est souvent utilisée pour des formes géométriques simples ou des conceptions personnalisées.
Les icônes CSS offrent plusieurs avantages, notamment l'évolutivité, la facilité de personnalisation et des tailles de fichiers potentiellement plus petites par rapport aux images. Ils peuvent constituer un moyen polyvalent et efficace d’ajouter des éléments visuels à votre conception Web.
Police géniale
Incluez Font Awesome dans votre projet :
Ajoutez cette ligne au champde votre HTML :

Copier après la connexion

Utilisez une icône
Pour utiliser une icône, ajoutez unou un élémentavec les classes appropriées :

Copier après la connexion

Icônes matérielles
Incluez des icônes matérielles dans votre projet :
Ajoutez cette ligne au
de votre HTML :

Copier après la connexion

Utilisez une icône
Pour utiliser une icône, ajoutez unélément avec la classe Material-Icones et le nom de l'icône :

Copier après la connexion

2. Utiliser CSS pour les icônes personnalisées
Vous pouvez également créer vos propres icônes avec CSS. Voici un exemple simple utilisant du CSS pur :
Créer une structure HTML de base

Copier après la connexion

Ajoutez du CSS pour styliser votre icône

.icon-star { display: inline-block; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid gold; position: relative; transform: rotate(35deg); } .icon-star:before { content: ''; position: absolute; top: 0; left: -50px; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid gold; transform: rotate(-70deg); }

Copier après la connexion

Cet extrait CSS crée une forme d'étoile simple en utilisant des bordures et un positionnement.
3. Icônes SVG
Vous pouvez également utiliser des SVG pour des icônes de haute qualité :
SVG en ligne

Copier après la connexion

Utiliser SVG comme image d'arrière-plan

.icon { width: 24px; height: 24px; background: url('data:image/svg+xml;base64,...') no-repeat center center; background-size: contain; }

Copier après la connexion

Conseils
Taille et couleur: pour les icônes de police et les SVG en ligne, vous pouvez ajuster la taille avec la taille de la police ou les propriétés de largeur et de hauteur, et changer la couleur avec la couleur ou le remplissage pour les SVG.
Accessibilité: pensez toujours à l'accessibilité en ajoutant du texte descriptif ou des attributs d'aria si nécessaire.
N'hésitez pas à expérimenter et à mélanger différentes méthodes pour trouver celle qui convient le mieux à votre projet !
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!