Maison > Article > interface Web > Comment styliser la couleur, la taille et l'ombre des icônes à l'aide de CSS

Comment styliser la couleur, la taille et l'ombre des icônes à l'aide de CSS

王林avant: 2023-09-15 21:53:02819parcourir

如何使用 CSS 设置图标颜色、大小和阴影的样式

Les icônes sont une partie importante de tout site Web ou application car elles nous fournissent un moyen rapide et facile pour les utilisateurs de comprendre et d'interagir avec le contenu. Cependant, l’utilisation d’icônes par défaut peut donner à un site Web un aspect générique et peu attrayant. En utilisant CSS, nous pouvons styliser la couleur, la taille et l’ombre des icônes pour créer une expérience utilisateur unique et visuellement attrayante.

Dans cet article, nous apprendrons comment styliser la couleur, la taille et l'ombre des icônes à l'aide de CSS. Nous apprendrons différentes manières de styliser les icônes en CSS.

Différentes approches du style des icônes en CSS

Méthode 1 : utiliser des icônes Font Awesome

La première façon de styliser vos icônes consiste à utiliser la police Awesome Icons, une police d'icônes populaire qui fournit une bibliothèque extensible d'icônes vectorielles pouvant être personnalisées à l'aide de CSS. Les icônes Font Awesome peuvent être de différentes couleurs, tailles et nuances pour correspondre au design de votre site Web.

Les icônes Font Awesome sont très faciles à utiliser. Tout d’abord, nous devons inclure la feuille de style Font Awesome dans notre document HTML en ajoutant le code suivant dans la section head -

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

Après avoir inclus la feuille de style Font Awesome, nous pouvons désormais utiliser n'importe quelle icône Font Awesome dans un document HTML en utilisant la balise i avec la classe appropriée. Voir la syntaxe suivante pour plus de détails -

Grammaire

La syntaxe suivante définit la couleur et l'ombre du texte de l'élément i. L'élément est constitué de classes représentant des icônes HTML.

.icon-1 {
   color: red;
   text-shadow: 2px 2px 2px orange;
}
<div class="icon-1">
   <i class="fa fa-html5" aria-hidden="true"></i>
</div>

Exemple

Dans l'exemple ci-dessous, nous modifions les couleurs des icônes HTML5, CSS3 et Github en rouge, bleu et noir respectivement. Dans le même temps, la taille de toutes les icônes est définie sur 10 em et les ombres du texte dans chaque icône sont respectivement orange, bleu ciel et grises.

<html>
<head>
   <title>Font Awesome icons styling using CSS</title>
   <link rel="stylesheet" href=
   "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <style>
      .icon-1 {
         color: red;
         text-shadow: 2px 2px 2px orange;
      }
      .icon-2 {
         color: blue;
         text-shadow: 2px 2px 2px skyblue;
      }
      .icon-3 {
         color: black;
         text-shadow: 2px 2px 2px gray;
      }      
      .fa { font-size: 10em;}
   </style>
</head>
<body>
   <h2>Styling Font Awesome Icons using CSS</h2>
   <div class="icon-1">
      <i class="fa fa-html5" aria-hidden="true"></i>
   </div>
   <div class="icon-2">
      <i class="fa fa-css3" aria-hidden="true"></i>
   </div>
   <div class="icon-3">
      <i class="fa fa-github" aria-hidden="true"></i>
   </div>
</body>
</html>

Méthode 2 : Utiliser les icônes CSS

Les icônes CSS sont une autre façon d’ajouter des icônes à votre site Web. Les icônes CSS sont créées à l'aide de propriétés CSS telles que le rayon de bordure, l'ombre de la boîte et le dégradé pour créer une forme semblable à une icône. Les icônes CSS sont légères, faciles à personnaliser et peuvent être adaptées à n'importe quelle taille.

Grammaire

La syntaxe ci-dessous montre comment créer une icône CSS en utilisant le pseudo-élément avant ou après et en ajoutant les propriétés CSS pertinentes.

.icon {
   position: relative;
   width: 50px;
   height: 40px;
   background-color: lightgreen;
   box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}		
.icon:before {
   content: "";
   position: absolute;
   top: 5px;
   left: 5px;
   width: 40px;
   height: 30px;
   background-color: green;
   box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}	
<div class="icon"></div>

Exemple

Dans l'exemple ci-dessous, nous avons ajouté trois icônes différentes de formes, tailles et couleurs différentes. Les couleurs des icônes CSS sont définies sur bleu clair, rouge clair et vert clair. Nous définissons également la taille de l'icône et les différentes couleurs de l'ombre de la boîte.

<html>
<head>
   <title>CSS icons styling using CSS</title>
   <style>
      .container {
         display: flex;
         gap: 10px;
         align-items: center
      }
      .icon-1 {
         position: relative;
         width: 50px;
         height: 50px;
         background-color: lightblue;
         box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
      }
      .icon-1:before {
         content: "";
         position: absolute;
         top: 5px;
         left: 5px;
         width: 40px;
         height: 40px;
         background-color: blue;
         box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
      }
      .icon-2 {
         position: relative;
         width: 50px;
         height: 50px;
         border-radius: 50px;
         background-color: lightgreen;
         box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
      }
      .icon-2:before {
         content: "";
         position: absolute;
         top: 5px;
         left: 5px;
         width: 40px;
         height: 40px;
         border-radius: 50px;
         background-color: green;
         box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
      }
      .icon-3 {
         position: relative;
         width: 50px;
         height: 40px;
         background-color: lightred;
         box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
      }
      .icon-3:before {
         content: "";
         position: absolute;
         top: 5px;
         left: 5px;
         width: 40px;
         height: 30px;
         background-color: red;
         box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
      }
   </style>
</head>
<body>
   <h2>CSS icons styling using CSS</h2>
   <div class="container">
      <div class="icon-1"></div>
      <div class="icon-2"></div>
      <div class="icon-3"></div>
   </div>
</body>
</html>

Méthode 3 : Utiliser les icônes SVG

Les icônes SVG (Scalable Vector Graphics) sont un autre moyen populaire d'ajouter des icônes à votre site Web. Les icônes SVG sont vectorielles, ce qui signifie qu'elles peuvent être redimensionnées à n'importe quelle taille sans perte de qualité. Il peut être personnalisé à l’aide de CSS pour modifier sa couleur, sa taille et son ombre.

Pour ajouter des icônes SVG à votre site Web, vous devez d'abord trouver l'icône SVG que vous souhaitez utiliser. Vous pouvez trouver des icônes SVG sur des sites comme Font Awesome, ou créer les vôtres à l'aide d'un logiciel d'édition vectorielle comme Adobe Illustrator ou Inkscape.

Grammaire

La syntaxe suivante définit le remplissage, la hauteur et la largeur ainsi que les filtres de l'élément svg. Nous définissons différentes couleurs, tailles et ombres pour les icônes svg.

svg {
   fill: green;
   width: 50px;
   height: 50px;
   filter: drop-shadow(2px 2px 2px orange);
}
<svg>...</svg>

Exemple

Dans l'exemple ci-dessous, nous utilisons du code SVG en ligne pour afficher l'icône de recherche et du CSS pour styliser sa couleur, sa taille et son ombre. Ici, l'attribut fill est utilisé pour changer la couleur de l'icône en rouge, les attributs width et height sont utilisés pour augmenter la taille de l'icône à 50px et l'attribut filter est utilisé pour ajouter une ombre à l'icône.

<html>
<head>
   <title>SVG Icon styling using CSS</title>
   <style>
      svg {
         fill: green;
         width: 50px;
         height: 50px;
         filter: drop-shadow(2px 2px 2px orange);
      }
   </style>
</head>
<body>
   <h2>SVG Icon styling using CSS</h2>
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M0 0h24v24H0z" fill="none"/>
      <path d="M16.007 4c-3.308 0-6 2.692-6 6 0 .463.052.912.142 1.346l-7.264 7.264a1.5 1.5 0 0 0 2.122 2.122l7.264-7.264A5.933 5.933 0 0 0 16.007 16c3.308 0 6-2.692 6-6s-2.692-6-6-6zm0 10a3.999 3.999 0 0 1-3.998-3.98c0-2.209 1.79-3.998 3.998-3.998s3.998 1.79 3.998 3.998c0 2.209-1.79 3.98-3.998 3.98z"/>
   </svg>
</body>
</html>

Conclusion

Concevoir les couleurs, les tailles et les ombres des icônes à l'aide de CSS est un moyen très simple de donner à notre site Web ou à notre application un aspect personnalisé. Nous pouvons utiliser Font Awesome, des icônes SVG ou des icônes CSS grâce auxquelles nous pouvons créer des icônes uniques et visuellement attrayantes qui correspondent au design de notre site Web.

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!

html5 css css3 html Filter 样式表伪元素 github

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Renvoie la valeur de la propriété d'un élément sélectionné en utilisant CSSArticle suivant：Renvoie la valeur de la propriété d'un élément sélectionné en utilisant CSS

Articles Liés

Voir plus