CSS-Symbole mit Beispielen

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">

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>

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">

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>

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>

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);
}

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>

SVG als Hintergrundbild verwenden

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

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!

css html for include using class this border background transform

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn