Heim > Artikel > Web-Frontend > Symbol für CSS-Einstellungen

Symbol für CSS-Einstellungen

WBOYOriginal: 2023-05-21 10:50:371429Durchsuche

Mit der zunehmenden Entwicklung der Webtechnologie ist CSS als wichtiger Bestandteil der Frontend-Entwicklung immer leistungsfähiger geworden. CSS kann nicht nur das Seitenlayout, den Stil und die Animationseffekte steuern, sondern auch Symbole festlegen, um der Seite bessere visuelle Effekte zu verleihen. In diesem Artikel erfahren Sie, wie Sie mithilfe von CSS Symbole festlegen und der Webseite etwas Schönes hinzufügen.

1. Schriftartsymbole verwenden

Schriftsymbole werden durch Konvertieren von Symbolen in Schriftarten erstellt und können über CSS aufgerufen werden. Der Vorteil von Schriftsymbolen besteht darin, dass Größe, Farbe und Stil des Symbols leicht geändert werden können, was bei Bildsymbolen schwieriger ist.

Die Verwendung von Schriftartsymbolen ist sehr einfach. Sie müssen lediglich den entsprechenden Schriftarttyp und den Unicode-Wert für den Aufruf festlegen. Das Folgende ist ein Beispiel für die Verwendung der Font-Awesome-Bibliothek:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用字体图标</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-gnxSqbKCXUh497Mg0RpjJGw0C8yJjM0pS7oBneUpv9HNjM9z+Ulq6T03I5YQepIv" crossorigin="anonymous">
    <style>
        .icon {
            font-size: 24px;
            color: red;
        }
    </style>
</head>
<body>
    <i class="fas fa-heart icon"></i>
</body>
</html>

Durch die Einführung der Font-Awesome-Bibliothek rufen Sie die Klasse .icon in CSS auf, indem Sie &lt verwenden ;i> Das -Tag zeigt ein herzförmiges Symbol an und legt seine Größe auf 24 Pixel und seine Farbe auf Rot fest. Zu diesem Zeitpunkt wird auf der Seite ein rotes Herzsymbol angezeigt. .icon类，使用5a8028ccc7a7e27417bff9f05adf5932标签显示一个心形图标，并设置其大小为24px，颜色为红色。此时，页面中就会显示一个红色的心形图标。

二、使用SVG图标

SVG图标是一种基于XML的矢量图形。与字体图标不同的是，SVG图标是通过嵌入到HTML或CSS代码中来调用。使用SVG图标的一个好处是，它们可以被完全缩放而不会失去清晰度，因为它们是矢量而不是像素。

可以通过以下步骤使用SVG图标：

1.在HTML中嵌入SVG代码。

<svg viewBox="0 0 24 24">
    <path d="M12 2c-5.5 0-10 4.5-10 10s4.5 10 10 10 10-4.5 10-10-4.5-10-10-10zM12 18.5c-3.6 0-6.5-2.9-6.5-6.5s2.9-6.5 6.5-6.5 6.5 2.9 6.5 6.5-2.9 6.5-6.5 6.5z"></path>
</svg>

2.在CSS中设置SVG的颜色和大小。

.icon {
    fill: red;
    width: 32px;
    height: 32px;
}

通过CSS中设置.icon类的fill属性为红色，并设置其大小为32px x 32px，即可在页面中显示一个红色的SVG图标。

三、使用CSS背景图标

除了字体图标和SVG图标外，CSS背景图标也是一种常见的图标方式。CSS背景图标通常使用background-image属性，并使用CSS精灵技术将多个图标合并到一个图像文件中。

下面是一个使用CSS背景图标的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用CSS背景图标</title>
    <style>
        .icon {
            display: inline-block;
            width: 24px;
            height: 24px;
            background: url('icons.png') no-repeat;
        }
        .icon-facebook {
            background-position: 0 0;
        }
        .icon-twitter {
            background-position: -24px 0;
        }
        .icon-github {
            background-position: -48px 0;
        }
    </style>
</head>
<body>
    <div class="icon icon-facebook"></div>
    <div class="icon icon-twitter"></div>
    <div class="icon icon-github"></div>
</body>
</html>

在上面的例子中，使用了一个名为icons.png的图像文件，它将三个图标合并为一个图像。在CSS中，.icon类用于设置图标的大小和背景，而.icon-{name}类用于设置不同的图标位置。例如，.icon-facebook

2. SVG-Symbole verwenden

SVG-Symbol ist eine XML-basierte Vektorgrafik. Im Gegensatz zu Schriftsymbolen werden SVG-Symbole durch die Einbettung in HTML- oder CSS-Code aufgerufen. Ein Vorteil der Verwendung von SVG-Symbolen besteht darin, dass sie ohne Verlust der Klarheit vollständig skaliert werden können, da es sich um Vektoren und nicht um Pixel handelt.

Sie können SVG-Symbole verwenden, indem Sie die folgenden Schritte ausführen:

1 Betten Sie den SVG-Code in HTML ein. #🎜🎜#rrreee#🎜🎜#2. Legen Sie die Farbe und Größe von SVG in CSS fest. #🎜🎜#rrreee#🎜🎜#Setzen Sie das Attribut fill der Klasse .icon in CSS auf Rot und legen Sie die Größe auf 32 x 32 Pixel fest. Dann können Sie sehen Es zeigt auf der Seite ein rotes SVG-Symbol an. #🎜🎜##🎜🎜#3. Verwenden Sie CSS-Hintergrundsymbole#🎜🎜##🎜🎜#Neben Schriftartsymbolen und SVG-Symbolen sind auch CSS-Hintergrundsymbole eine gängige Symbolmethode. CSS-Hintergrundsymbole verwenden normalerweise die Eigenschaft background-image und nutzen die CSS-Sprite-Technologie, um mehrere Symbole in einer Bilddatei zusammenzuführen. #🎜🎜##🎜🎜#Hier ist ein Beispiel für die Verwendung von CSS-Hintergrundsymbolen: #🎜🎜#rrreee#🎜🎜#Im obigen Beispiel wird eine Bilddatei namens icons.png verwendet, die kombiniert drei Symbole in einem Bild. In CSS wird die Klasse .icon zum Festlegen der Größe und des Hintergrunds des Symbols verwendet, während die Klasse .icon-{name} zum Festlegen verschiedener Symbolpositionen verwendet wird. Beispielsweise setzt die Klasse .icon-facebook die Bildposition auf 0px, und andere Klassen lauten wie folgt. #🎜🎜##🎜🎜#Ein Vorteil von CSS-Hintergrundsymbolen besteht darin, dass das Symbol skaliert und gekachelt werden kann, um es an Geräte unterschiedlicher Größe und Auflösung anzupassen. #🎜🎜##🎜🎜#Zusammenfassung#🎜🎜##🎜🎜#In diesem Artikel haben wir vorgestellt, wie man CSS zum Festlegen von Schriftartsymbolen, SVG-Symbolen und CSS-Hintergrundsymbolen verwendet. Diese Symboltechnologien haben ihre eigenen Vor- und Nachteile und Eigenschaften, und Sie können je nach Ihren Anforderungen die Technologie auswählen, die am besten zu Ihnen passt. Wenn Sie einige schöne Elemente hinzufügen und das Benutzererlebnis verbessern möchten, sind Symbole eine gute Wahl. #🎜🎜#

Das obige ist der detaillierte Inhalt vonSymbol für CSS-Einstellungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html xml background

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

Vorheriger Artikel：Ist Javascript noch nützlich?Nächster Artikel：Ist Javascript noch nützlich?

In Verbindung stehende Artikel

Mehr sehen