Symbole können mithilfe einer Symbolbibliothek ganz einfach zu unserer HTML-Seite hinzugefügt werden.
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:
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.
Sie könnten eine Klasse wie .fa-heart verwenden, um Ihrem HTML ein Herzsymbol hinzuzufügen und es dann mit CSS-Eigenschaften zu formatieren.
Symbole können mit reinem CSS erstellt werden, indem HTML-Elemente (wie
Font Awesome in Ihr Projekt einbeziehen:
Fügen Sie diese Zeile zum
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
Um ein Symbol zu verwenden, fügen Sie ein oder element mit den entsprechenden Klassen:
<i class="fas fa-camera"></i>
Fügen Sie Materialsymbole in Ihr Projekt ein:
Fügen Sie diese Zeile zum
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
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>
Sie können auch Ihre eigenen Symbole mit CSS erstellen. Hier ist ein einfaches Beispiel mit reinem CSS:
<div class="icon-star"></div>
.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); }
Dieses CSS-Snippet erstellt mithilfe von Rahmen und Positionierung eine einfache Sternform.
Sie können auch SVGs für hochwertige Symbole verwenden:
<svg width="24" height="24" viewBox="0 0 24 24"> <path d="M12 2L2 7v10l10 5 10-5V7z"/> </svg>
.icon { width: 24px; height: 24px; background: url('data:image/svg+xml;base64,...') no-repeat center center; background-size: contain; }
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!