CSS-verbotenes Symbol

In der Frontend-Entwicklung ist es oft notwendig, Symbole zu verwenden, um die Seiten einer Website zu verschönern und das Benutzererlebnis zu verbessern, aber manchmal müssen wir möglicherweise auch das Erscheinen bestimmter Symbole verbieten. Zu diesem Zeitpunkt müssen Sie CSS verwenden, um die Funktion zum Deaktivieren des Symbols zu implementieren.

Im Allgemeinen beziehen wir uns bei Symbolen auf der Seite auf Schriftartsymbole oder SVG-Symbole, da es sich bei allen um Vektorsymbole handelt, die nicht in verschiedenen Größen verzerrt werden. Es gibt im Wesentlichen zwei Möglichkeiten, Symbole zu deaktivieren: Eine besteht darin, Pseudoklassenselektoren in CSS zu verwenden, und die andere darin, das Datenattribut in HTML zu verwenden. Im Folgenden erläutern wir die konkrete Umsetzung dieser beiden Methoden im Detail.

Schauen wir uns zunächst die erste Methode an – die Verwendung von CSS-Pseudoklassenselektoren. Diese Methode eignet sich für die Verwendung mit Schriftartsymbolen. Im Allgemeinen verwenden wir Schriftartsymbole, indem wir das Klassenattribut des Elements auf den Klassennamen des Symbols setzen, dann @font-face verwenden, um die Schriftart in CSS zu deklarieren, die Schriftartdatei in die Seite einzufügen und die Schriftart festzulegen -family-Attribut des Elements. Dieser Schriftartname wird verwendet, um das Symbol auf der Seite anzuzeigen. Wenn wir verhindern möchten, dass ein Symbol angezeigt wird, können wir die Pseudoklasse :before oder :after verwenden, um den ursprünglichen Namen der Symbolklasse zu ersetzen, und das Inhaltsattribut auf leer setzen.

Zum Beispiel haben wir ein Element mit dem Klassenattribut „icon“ und einer Symbolklasse namens „icon-delete“. Wenn wir verhindern möchten, dass das Symbol im Element erscheint, können wir schreiben dies in CSS:

.icon::before {
  content: none;
}

Dadurch wird verhindert, dass das Symbol „icon-delete“ in diesem Element angezeigt wird.

Eine andere Möglichkeit besteht darin, das Datenattribut in HTML zu verwenden. Diese Methode eignet sich für die Verwendung mit SVG-Symbolen. Wenn wir SVG-Symbole verwenden, fügen wir normalerweise die SVG-Symboldatei in die Seite ein und betten sie dann mit dem