CSS-Symbole mit Beispielen-CSS-Tutorial-php.cn

CSS-Symbole mit Beispielen

王林

Freigeben： 2024-07-30 22:56:43

Original

835 Leute haben es durchsucht

CSS Icons with examples

CSS-Symbole

Symbole können mithilfe einer Symbolbibliothek ganz einfach zu unserer HTML-Seite hinzugefügt werden.

So fügen Sie Symbole hinzu

Der einfachste Weg, ein Symbol zu Ihrer HTML-Seite hinzuzufügen, ist mit einer Symbolbibliothek wie Font Awesome.
Fügen Sie den Namen der angegebenen Symbolklasse zu jedem Inline-HTML-Element hinzu (wie oder ).
CSS-Symbole sind Symbole oder grafische Darstellungen, die mit
erstellt werden CSS (Cascading Style Sheets) statt herkömmlicher Bildformate wie PNG oder SVG.
Sie werden im Webdesign häufig verwendet, um einer Website visuelle Elemente hinzuzufügen, ohne auf Bilddateien angewiesen zu sein.
Es gibt einige gängige Methoden zum Erstellen von CSS-Symbolen:

Schriftsymbole:

Dies sind Symbole, die aus speziellen Symbolschriftarten wie Font Awesome, Material Icons oder Ion Icons erstellt wurden. Diese Schriftarten enthalten eine Reihe von Glyphen (Symbolen), die mit CSS gestaltet werden können.

Zum Beispiel

Sie könnten eine Klasse wie .fa-heart verwenden, um Ihrem HTML ein Herzsymbol hinzuzufügen und es dann mit CSS-Eigenschaften zu formatieren.

CSS-Formen:

Symbole können mit reinem CSS erstellt werden, indem HTML-Elemente (wie
, usw.) mit CSS-Eigenschaften wie Rahmen, Rahmenradius, Hintergrund und Transformation gestaltet werden. Diese Methode wird häufig für einfache geometrische Formen oder individuelle Designs verwendet.
CSS-Symbole bieten mehrere Vorteile, darunter Skalierbarkeit, einfache Anpassung und möglicherweise kleinere Dateigrößen im Vergleich zu Bildern. Sie können eine vielseitige und effiziente Möglichkeit sein, Ihrem Webdesign visuelle Elemente hinzuzufügen.

Fantastische Schriftart

Font Awesome in Ihr Projekt einbeziehen:
Fügen Sie diese Zeile zum hinzu. Ihres HTML:

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

Verwenden Sie ein Symbol

Um ein Symbol zu verwenden, fügen Sie ein oder element mit den entsprechenden Klassen:

<i class="fas fa-camera"></i>
Nach dem Login kopieren

Materialsymbole

Fügen Sie Materialsymbole in Ihr Projekt ein:
Fügen Sie diese Zeile zum
Ihres HTML hinzu:

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

Verwenden Sie ein Symbol

Um ein Symbol zu verwenden, fügen Sie ein Element mit der Klasse material-icons und dem Symbolnamen:

<i class="material-icons">camera_alt</i>
Nach dem Login kopieren

2. Verwenden von CSS für benutzerdefinierte Symbole

Sie können auch Ihre eigenen Symbole mit CSS erstellen. Hier ist ein einfaches Beispiel mit reinem CSS:

Erstellen Sie eine grundlegende HTML-Struktur

<div class="icon-star"></div>
Nach dem Login kopieren

Fügen Sie CSS hinzu, um Ihr Symbol zu gestalten

.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); }
Nach dem Login kopieren

Dieses CSS-Snippet erstellt mithilfe von Rahmen und Positionierung eine einfache Sternform.

3. SVG-Symbole

Sie können auch SVGs für hochwertige Symbole verwenden:

Inline SVG

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

SVG als Hintergrundbild verwenden

.icon { width: 24px; height: 24px; background: url('data:image/svg+xml;base64,...') no-repeat center center; background-size: contain; }
Nach dem Login kopieren

Tipps

Größe und Farbe: Bei Schriftartsymbolen und Inline-SVGs können Sie die Größe mit den Eigenschaften „font-size“ oder „width“ und „height“ anpassen und bei SVGs die Farbe mit „color“ oder „fill“ ändern.
Barrierefreiheit: Berücksichtigen Sie immer die Barrierefreiheit, indem Sie bei Bedarf beschreibenden Text oder Arienattribute hinzufügen.
Experimentieren Sie ruhig und kombinieren Sie verschiedene Methoden, um herauszufinden, was für Ihr Projekt am besten funktioniert!

Das obige ist der detaillierte Inhalt vonCSS-Symbole mit Beispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!