Social Media Icons: Fontawesome Upgrade von 5.0.10 auf 5.14.0
Hallo liebe Community,
ich würde gerne das in meinem Website-Theme enthaltene social-follow Modul so bearbeiten, dass ich auf die Icons von Fontawesome-5.14.0 zugreifen kann. Der Grund ist, dass ich gerne auf ein TikTok Icon zugreifen möchte, das bei Fontawesome-5.0.10 nicht vorhanden ist.
Wenn ich nun im social-follow Modul versuche, die Icons auf Fontawesome-5.14.0 umzustellen, erhalte ich die Meldung, dass die "icon_set" Eigenschaft in meinem Modul vorhanden sein muss.
Leider ist mir nicht genau bewusst, was das bedeutet. Wie kann ich mein Modul so bearbeiten, dass ich auf die Icons aus Fontawesome-5.14.0 zugreifen kann?
Ich habe den Code ersetzt, aber leider hat es noch nicht geklappt. In der Vorschau kann ich zwar aus den fontawesome-5.14.0 Icons wählen, allerdings taucht das ausgewählte Icon dann nicht neben den Standardicons auf.
Muss ich eventuell eine neue Variable mit dem Namen "icon_set" erstellen?
Falls dies nicht klappen sollte, kopiere die komplette Gruppe "social links", füge den kopierten Inhalt irgendwo ein, word, editor, HubSpot - spielt ersteinmal keine Rolle und suche nach dem Icon Code Fragment. Dieses sollte das icon_set und alle anderen Angaben enthalten. Wenn du es gefunden hast, tausche den Code im Modul aus und überprüfe, ob es funktioniert.
ohne zu wissen welches Theme du nutzt oder den kompletten Code des Moduls zu sehen ist es sehr schwer genaues zu sagen. Kannst du mehr Informationen teilen?
Persönlich nutze ich immer ein eigens entwickeltes Modul welches folgende Felder beinhaltet:
{% require_css %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/brands.min.css" integrity="sha512-G/T7HQJXSeNV7mKMXeJKlYNJ0jrs8RsWzYG7rVACye+qrcUhEAYKYzaa+VFy6eFzM2+/JT1Q+eqBbZFSHmJQew==" crossorigin="anonymous" referrerpolicy="no-referrer" />
{% end_require_css %}
<ul class="socialNetworks">
{% for single_network in module.social_icons %}
<li class="singleNetwork">
{% set href = single_network.link_field.url.href %}
{% if single_network.link_field.url.type is equalto "EMAIL_ADDRESS" %}
{% set href = "mailto:" + href %}
{% endif %}
<a href="{{ href }}" {% if single_network.link_field.open_in_new_tab %}target="_blank"{% endif %} {% if single_network.link_field.rel %}rel="{{ single_network.link_field.rel }}"{% endif %}>
<i class="fa-brands {{ single_network.icon_name }} socialIcon"></i>
</a>
</li>
{% endfor %}
</ul>
als Namen schreibe ich dann "fa-tiktok", "fa-facebook-f", "fa-twitter" etc ein. Um es noch einfacher zu gestalten kannst du auch die Auswahl funktion nutzen. Dabei wird als Label der Name des Networks eingetragen und beim value wieder "fa-tiktok", "fa-facebook-f", "fa-twitter" eintragen.
Du kannst es noch einfacher machen indem du das "fa-" direkt in den code schreibst. Dann brauchst du nur noch den jeweiligen FontAwesome Icon Namen eintragen. Also "tiktok", "facebook-f", "twitter"...
{% require_css %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/brands.min.css" integrity="sha512-G/T7HQJXSeNV7mKMXeJKlYNJ0jrs8RsWzYG7rVACye+qrcUhEAYKYzaa+VFy6eFzM2+/JT1Q+eqBbZFSHmJQew==" crossorigin="anonymous" referrerpolicy="no-referrer" />
{% end_require_css %}
<ul class="socialNetworks">
{% for single_network in module.social_icons %}
<li class="singleNetwork">
{% set href = single_network.link_field.url.href %}
{% if single_network.link_field.url.type is equalto "EMAIL_ADDRESS" %}
{% set href = "mailto:" + href %}
{% endif %}
<a href="{{ href }}" {% if single_network.link_field.open_in_new_tab %}target="_blank"{% endif %} {% if single_network.link_field.rel %}rel="{{ single_network.link_field.rel }}"{% endif %}>
<i class="fa-brands fa-{{ single_network.icon_name }} socialIcon"></i>
</a>
</li>
{% endfor %}
</ul>