WordPress. Wie man Icons zu Links zu den sozialen Netzwerken (wenn sie als Text standardmäßig festgelegt sind) hinzufügt

Von diesem Tutorial erfahren Sie, wie man Icons zu Links zu den sozialen Netzwerken in WordPress (wenn sie als Text standardmäßig festgelegt sind) hinzufügt.

WordPress. Wie man Icons zu Links zu sozialen Netzwerken (wenn sie als Text standardmäßig festgelegt sind) hinzufügt

Die Links zu den sozialen Netzwerken können entweder als Text oder als Icons festgelegt werden. In einigen Vorlagen werden die Links als Text dargestellt. In dem WordPress Control Panel gibt es keine Einstellung, die es Ihnen ermöglicht, einen Text durch Icons zu ersetzen:

Es kann wirklich ein großes Problem sein, wenn Sie nicht wissen, was Sie damit tun sollen. Aus diesem Grund freuen wir uns Ihnen dieses Tutorial zur Verfügung zu stellen.

Um die Icons zu den Links zu den sozialen Netzwerken auf Ihrer WordPress Website hinzuzufügen, führen Sie die folgenden Schritte aus:

Wie man die FontAwesome Icons hinzufügt:

1. Vor allem sollen Sie die Icons hinzufügen. Dies können Sie mit Hilfe von CSS Regeln erfüllen. Um die Regeln hinzuzufügen, loggen Sie sich ins WordPress Control Panel ein und finden Sie den Tab Aussehen (Appearance) -> Editor (Editor). Öffnen Sie die Datei style.css und scrollen Sie zum Ende der Datei.

2. Sie sollen die Regeln erstellen, in denen Selektor-Namen der Links zu den sozialen Netzwerken und das CSS Element ::before verwendet werden. Die Regeln müssen wie folgt aussehen:

   [title="facebook"]::before {
     content: "" !important;
     font-family: FontAwesome !important;
     font-size: 40px !important;
   }
   

   In die” ” Eigenschaft content: sollen Sie das FontAwesome Icon einfügen. Um dies zu machen, sollen Sie das Icon aus der Liste der Icons FontAwesome 3.2.1 erst finden, dann kopieren und danach in ” ” einfügen. (Achten Sie darauf, dass Sie das Icon und nicht seinen Code kopieren müssen):

   

   In dieser Regel können Sie auch die Schriftgröße für die Icons festlegen. Zum Beispiel, wir haben die Schriftgröße – 40px mit Hilfe der CSS Eigenschaft font-size: 40px !important; festgelegt.

3. Jetzt sollen Sie die Regeln für andere Links zu den sozialen Netzwerken erstellen, die in Ihrer Vorlage verwendet sind. Kopieren Sie die Regeln und fügen Sie so oft ein, wie es nötig ist. Ändern Sie den Namen des Links zu den sozialen Netzwerken in dem Selektor [title=”facebook”]. Danach kopieren Sie und fügen Sie die notwendigen Icons aus der Liste der Icons FontAwesome 3.2.1 in content: “” !important; ein. Im Ergebnis werden die Regeln wie folgt aussehen:

   [title="twitter"]::before {
     content: "" !important;
     font-family: FontAwesome !important;
   font-size: 40px !important;
   }
   
   [title="instagram"]::before {
     content: "" !important;
     font-family: FontAwesome !important;
   font-size: 0px !important;
   }
   
   [title="google"]::before {
     content: "" !important;
     font-family: FontAwesome !important;
   font-size: 40px !important;
   }
   

4. Nachdem Sie die Regeln bearbeitet haben, drücken Sie auf den Button Datei aktualisieren (Update File), um die Änderungen zu speichern:

   

Wie man den Text der sozialen Links löscht

1. Öffnen Sie die Datei static-social-networks.php im Tab Aussehen (Appearance) -> Editor (Editor) in Ihrem WordPress Control Panel.

2. Indem Sie die Tastenkombination Ctrl + F nutzen, finden Sie die folgende Codezeile (am Ende des Dateiinhalts):

   echo $social_networks[$i];
   

   

3. Löschen Sie diese Zeile.

4. Drücken Sie auf den Button Datei aktualisieren (Update File), um die Änderungen zu speichern.

Aktualisieren Sie die Seite Ihrer Website, um sich zu überzeugen, dass die Links zu den sozialen Netzwerken jetzt als Icons dargestellt sind:

Sie können jetzt selbst die Icons zu Links zu den sozialen Netzwerken (wenn sie als Text standardmäßig festgelegt sind) hinzufügen.

Sie können auch das ausführliche Video-Tutorial nutzen:

WordPress. Wie man Icons zu Links zu den sozialen Netzwerken (wenn sie als Text standardmäßig festgelegt sind) hinzufügt