Explication détaillée des propriétés des icônes CSS : content et font-icon

Explication détaillée des propriétés des icônes CSS : contenu et font-icon

Dans le développement front-end, les icônes sont souvent utilisées pour améliorer la lisibilité et l'interactivité des pages Web. En CSS, il existe deux manières courantes d'afficher les icônes : en utilisant l'attribut content et font-icon (icône de police). Cet article détaille les deux méthodes et fournit des exemples de code spécifiques.

1. Attribut Content

L'attribut content est un attribut important en CSS Il est principalement utilisé pour insérer du contenu avant et après les éléments. Dans l'affichage des icônes, vous pouvez définir l'attribut content pour référencer des caractères Unicode spécifiques ou d'autres éléments pour obtenir l'affichage de l'icône.

1. Utilisez des caractères Unicode

Unicode est une norme de codage de caractères unifiée à l'échelle mondiale qui contient un grand nombre de symboles et d'icônes spéciaux. En utilisant des caractères Unicode dans l'attribut content, nous pouvons facilement afficher des icônes dans les pages Web.

Par exemple, si nous voulons ajouter une icône de flèche vers le haut à un bouton, nous pouvons écrire du code CSS comme ceci :

.btn::before {
  content: "91";
}

Dans le code ci-dessus, le pseudo-élément ::before signifie insérer du contenu avant le contenu du bouton, et 91 est en code Unicode représentant une flèche vers le haut. Cela affichera automatiquement une icône de flèche vers le haut devant le bouton.

2. Utilisation de pseudo-éléments

En plus d'utiliser des caractères Unicode, nous pouvons également combiner des pseudo-éléments pour afficher des icônes. En définissant l'attribut de contenu et le style sur un pseudo-élément, vous pouvez afficher une icône à un emplacement spécifique de l'élément.

Par exemple, si l'on souhaite ajouter une petite icône devant un lien dans une barre de navigation, on peut écrire du code CSS comme ceci :

.nav-link::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-image: url("icon.png");
  background-size: cover;
}

Dans le code ci-dessus, le pseudo-élément ::before signifie insérer du contenu avant le contenu du lien, en définissant l'attribut de contenu vide, et définissez les styles d'image de largeur, de hauteur et d'arrière-plan pour afficher une petite icône devant le lien.

2. font-icon (icône de police)

L'icône de police est un fichier de police spécial dans lequel chaque caractère est une icône vectorielle. En définissant l'attribut de police de l'élément, une icône de police spécifique peut être affichée.

1. Présenter la bibliothèque d'icônes

Avant d'utiliser les icônes de police, vous devez d'abord présenter la bibliothèque d'icônes correspondante. Les bibliothèques d'icônes de police courantes incluent FontAwesome, Iconfont, etc. Les icônes de police peuvent être utilisées en incluant le fichier de police et le fichier CSS correspondant dans la page Web.

Par exemple, si nous utilisons la bibliothèque d'icônes FontAwesome dans une page Web, nous pouvons suivre les étapes ci-dessous :

1) Introduire le fichier font-awesome.min.css dans HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-M18tXYzw1Fqk0BiGJ3jyzNN4MFI8hgmAW27ozEoH847nMwccLkG0arELWC3l6DuhltShMYvdu1e3no/7I6NHQA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

2) Utiliser l'élément HTML correspondant et le nom de la classe à afficher Icône

<i class="fas fa-arrow-up"></i>

Dans le code ci-dessus, <i> 元素代表图标，类名 fas 表示字体图标，类名 fa-arrow-up représente le nom de l'icône spécifique. De cette façon, nous pouvons afficher une icône avec une flèche vers le haut dans la page Web.

2. Ajuster le style de l'icône

Une fois la bibliothèque d'icônes de police introduite, nous pouvons ajuster l'affichage de l'icône en définissant le nom de classe et le style de l'élément.

Par exemple, si nous voulons ajuster la taille, la couleur et l'angle de rotation de l'icône, nous pouvons définir le style CSS correspondant :

.icon {
  font-size: 20px;
  color: red;
  transform: rotate(45deg);
}

Dans le code ci-dessus, .icon est un nom de classe en appliquant le nom de la classe à. l'élément que vous pouvez créer. Il a une taille de police de 20 pixels, une couleur rouge et une rotation dans le sens des aiguilles d'une montre de 45 degrés.

Résumé : 

attribut content et font-icon (icône de police) sont deux méthodes courantes pour implémenter l'affichage des icônes de page Web. En définissant l'attribut content, vous pouvez afficher directement des caractères Unicode ou d'autres éléments sous forme d'icônes et en introduisant une bibliothèque d'icônes de police, vous pouvez afficher des icônes de police spécifiques via des noms de classe et des styles. Les développeurs peuvent choisir la méthode appropriée pour obtenir l'effet d'affichage des icônes en fonction de besoins spécifiques.

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!