wie man Social-Media-Symbole in WordPress ohne Plugins hinzufügt

Möchten Sie Ihrer WordPress-Site ohne Plugin Social-Media-Symbole hinzufügen?

Es gibt eine Menge Beiträge, die zeigen, wie man Symbole mit Font Awesome hinzufügt, aber ich werde Ihnen einen viel einfacheren Weg zeigen, ohne externe Symbole hinzufügen zu müssen.

Wenn Sie die Seitengeschwindigkeit ernst nehmen, werden Sie dies lieben.

Dashicons is the official WordPress icon font. They appear in the left sidebar of every WordPress site admin backend.

We will use these icons instead of external icons. This will free up the browser from requesting additional files.

Befolgen Sie einfach diese Schritte:

Schritt 1

Fügen Sie das benutzerdefinierte HTML-Widget in der Seitenleiste oder Fußzeile hinzu. Sie können Widgets unter Dashboard >>> Darstellung >>> Widgets verwalten.

Schritt 2

Fügen Sie diesen Code in das Inhaltsfeld ein

In this code, we display the Facebook and Twitter icons only.
To add more icons, you will need to customize three parts in it.

href is the link to you social page
aria-label is text that describes the link

Drittens und am wichtigsten ist die Klasse = "Dashicons Dashicons-Facebook-Alt"

Jede Schriftart in den Dashicons verfügt über eine bestimmte Klasse, mit der das Symbol angezeigt wird. Wir können die Klasse eines Symbols finden, indem wir darauf klicken

Ersetzen Sie diesen Teil durch den Teil, den Sie verwenden möchten

Ersetzen Sie beispielsweise dashicons-facebook-alt durch Dashicons-Herz und das Herzsymbol wird angezeigt.

Schritt 3.

Fügen Sie dieses CSS in Ihre Style.css-Datei für untergeordnete Themen oder in die zusätzliche CSS-Option Ihres Customizers ein

.social-link-container {Anzeige: flex; } .social-link-container .social-link {padding: 3px; Rand rechts: 10px; } .dashicons {Schriftgröße: 30px; Farbe: #fff; Breite: 40px; Höhe: 40px; Randradius: 50%; Anzeige: flex; Rechtfertigungsinhalt: Mitte; Ausrichtungselemente: Mitte; }}

Dieser obige Code fügt alle Attribute der Symbole mit Ausnahme der Farbe hinzu. Verwenden Sie den folgenden Code, um den Symbolen Farbe hinzuzufügen, die erst dann sichtbar sind.

.dashicons-facebook-alt {Hintergrund: # 1877F2; } .dashicons-twitter {Hintergrund: # 1DA1F2; }}

Wenn Sie weitere Symbole hinzufügen, können Sie jedem Symbol mithilfe seiner Klasse und des obigen CSS eine andere Hintergrundfarbe hinzufügen.

Möchten Sie einen einfachen Hover-Effekt hinzufügen? Fügen Sie dies Ihrem CSS hinzu, wenn Sie einen Hover-Effekt "Einwachsen" anzeigen möchten

.dashicons: hover {-webkit-transform: scale (1.2); -ms-Transformation: Skala (1.2); transformieren: Skala (1.2); }}

Das ist es! Leeren Sie nun den Website-Cache und überprüfen Sie Ihr Widget. Es wird so angezeigt

If you follow the steps exactly, you will get it working.
If not, then comment down below, and I can help you to solve it.