Icônes CSS avec exemples

Icônes CSS

Des 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 (comme ou ).
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 champ de votre HTML :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

Utiliser une icône

Pour utiliser une icône, ajoutez un ou un élément avec les classes appropriées :

<i class="fas fa-camera"></i>

Icônes matérielles

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

de votre HTML :

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Utiliser une icône

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

<i class="material-icons">camera_alt</i>

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

<div class="icon-star"></div>

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);
}

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

<svg width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 2L2 7v10l10 5 10-5V7z"/>
</svg>

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;
}

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'air 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!

css html for include using class this border background transform

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn