icône CSS interdite

Dans le développement front-end, il est souvent nécessaire d'utiliser des icônes pour embellir les pages d'un site Web et améliorer l'expérience utilisateur, mais parfois nous pouvons également être amenés à interdire l'apparition de certaines icônes. À ce stade, vous devez utiliser CSS pour implémenter la fonction de désactivation de l'icône.

Généralement, la façon dont nous faisons référence aux icônes sur la page est d'utiliser des icônes de police ou des icônes SVG, car ce sont des icônes vectorielles et ne seront pas déformées dans différentes tailles. Il existe deux manières principales de désactiver les icônes : l'une consiste à utiliser des sélecteurs de pseudo-classe en CSS et l'autre consiste à utiliser l'attribut data en HTML. Ci-dessous, nous expliquerons en détail la mise en œuvre spécifique de ces deux méthodes.

Tout d’abord, regardons la première méthode : utiliser des sélecteurs de pseudo-classe CSS. Cette méthode convient à une utilisation avec des icônes de police. Généralement, la façon dont nous utilisons les icônes de police consiste à définir l'attribut de classe de l'élément sur le nom de classe de l'icône, puis à utiliser @font-face pour déclarer la police en CSS, à introduire le fichier de police dans la page et à définir la police. Attribut -family de l'élément à Ce nom de police est utilisé pour afficher l'icône sur la page. Si nous voulons empêcher une icône d'apparaître, nous pouvons utiliser la pseudo-classe :before ou :after pour remplacer le nom de la classe d'icône d'origine et définir l'attribut content sur vide.

Par exemple, nous avons un élément avec l'attribut de classe "icon" et une classe d'icône nommée "icon-delete". Si nous voulons empêcher l'icône d'apparaître dans cet élément, nous pouvons écrire ceci en CSS :

.icon::before {
  content: none;
}

Cela désactivera l'apparition de l'icône « icône-supprimer » dans cet élément.

Une autre façon consiste à utiliser l'attribut data en HTML. Cette méthode convient à une utilisation avec les icônes SVG. Lorsque nous utilisons des icônes SVG, nous introduisons généralement le fichier d'icône SVG dans la page, puis utilisons la balise