Social Media Icons: Fontawesome Upgrade von 5.0.10 auf 5.14.0

Dtischlinger · ‎Feb 1, 2023

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?

Vielen Dank!

Dtischlinger · ‎Feb 2, 2023

Hallo @Anton,

vielen Dank für deine Nachricht. Ich werde direkt mal versuchen, das Modul soweit nachzubauen 🙂

Hier der Code des in meinem Template enthaltenen "social-follow" Moduls:

module.html (HTML + HubL)

{# Module styles #}
{% require_css %}
<style>
  {% scope_css %}

  {% if module.styles.social_label_color.color %}
  .social-label {
    color: rgba({{ module.styles.social_label_color.color|convert_rgb }}, {{ module.styles.social_label_color.opacity / 100 }});
  }
  {% endif %}

  {# Social follow wrapper #}

  .social-links {
    {% if module.styles.alignment.alignment.horizontal_align %}
    {% if module.styles.alignment.alignment.horizontal_align == 'LEFT' %}
    justify-content: flex-start;
    {% elif module.styles.alignment.alignment.horizontal_align == 'CENTER' %}
    justify-content: center;
    {% elif module.styles.alignment.alignment.horizontal_align == 'RIGHT' %}
    justify-content: flex-end;
    {% endif %}
    {% endif %}
  }

  {# Social follow icons #}

  .social-links__link {
    {% if module.styles.spacing.space_between_icons %}
    margin-right: {{ module.styles.spacing.space_between_icons ~ 'px' }};
    {% endif %}
    {% if module.styles.spacing.spacing.margin.bottom %}
    margin-bottom: {{ module.styles.spacing.spacing.margin.bottom.value ~ 'px' }};
    {% endif %}
    {% if module.styles.spacing.spacing.margin.top %}
    margin-top: {{ module.styles.spacing.spacing.margin.top.value ~ 'px' }};
    {% endif %}
  }

  .social-links__icon {
    {% if module.styles.background.color.color %}
    background-color: rgba({{ module.styles.background.color.color|convert_rgb }}, {{ module.styles.background.color.opacity / 100 }});
    {% endif %}
    {% if module.styles.corner.radius %}
    border-radius: {{ module.styles.corner.radius ~ 'px' }};
    {% endif %}
    {% if module.styles.spacing.spacing.padding.bottom %}
    padding-bottom: {{ module.styles.spacing.spacing.padding.bottom.value ~ 'px' }};
    {% endif %}
    {% if module.styles.spacing.spacing.padding.top %}
    padding-top: {{ module.styles.spacing.spacing.padding.top.value ~ 'px' }};
    {% endif %}
    {% if module.styles.spacing.spacing.padding.left %}
    padding-left: {{ module.styles.spacing.spacing.padding.left.value ~ 'px' }};
    {% endif %}
    {% if module.styles.spacing.spacing.padding.right %}
    padding-right: {{ module.styles.spacing.spacing.padding.right.value ~ 'px' }};
    {% endif %}
  }

  .social-links__icon svg {
    {% if module.styles.fill.color.color %}
    fill: {{ module.styles.fill.color.color }};
    {% endif %}
    {% if module.styles.size.size %}
    height: {{ module.styles.size.size ~ 'px' }};
    width: {{ module.styles.size.size ~ 'px' }};
    {% endif %}
  }

  {% if module.styles.background.color.color %}
  .social-links__icon:hover,
  .social-links__icon:focus {
    background-color: rgba({{ color_variant(module.styles.background.color.color, -20)|convert_rgb }}, {{ module.styles.background.color.opacity / 100 }});
  }
  {% endif %}

  {% if module.styles.background.color.color %}
  .social-links__icon:active {
    background-color: rgba({{ color_variant(module.styles.background.color.color, -30)|convert_rgb }}, {{ module.styles.background.color.opacity / 100 }});
  }
  {% endif %}

  {% end_scope_css %}
</style>
{% end_require_css %}
{# Social links #}

<div class="social-links">

  {# Loops through each social link in the social links repeater #}

  {% for item in module.social_links %}

  {# Sets attributes used for the link field #}

  {% set href = item.social_link.url.href %}
  {% if item.social_link.url.type is equalto 'EMAIL_ADDRESS' %}
  {% set href = 'mailto:' + href %}
  {% endif %}
  {% set rel = [] %}
  {% if item.social_link.no_follow %}
  {% do rel.append('nofollow') %}
  {% endif %}
  {% if item.social_link.open_in_new_tab %}
  {% do rel.append('noopener') %}
  {% endif %}

  {# Sets a custom icon if the custom option is selected #}

  {% if item.social_account != 'custom_icon' %}
  {% set social_icon = item.social_account %}
  {% else %}
  {% set social_icon = item.custom_icon.name %}
  {% endif %}

  {# Icon #}
  {% if module.social_label %}
  {% if loop.first %}
  <span class="social-label">
    {{ module.social_label }}
  </span>
  {% endif %}
  {% endif %}
  <a class="social-links__link" href="{{ href }}"
     {% if item.social_link.open_in_new_tab %}target="_blank"{% endif %}
     {% if rel %}rel="{{ rel|join(' ') }}"{% endif %}>
    {% icon
        extra_classes='social-links__icon',
        name='{{ social_icon }}',
        purpose='semantic',
        style='SOLID',
        title='{{ item.accessibility.title }}',
        unique_in_loop=True
      %}
  </a>

  {% endfor %}

</div>

module.css

.social-links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.social-links__icon {
  border-radius: 50%;
  display: inline-flex;
  height: 40px;
  margin: 0 0.35rem;
  position: relative;
  width: 40px;
}

.social-links__icon svg {
  fill: #FFF;
  height: 0.625rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
}

.social-links__icon:hover svg,
.social-links__icon:focus svg,
.social-links__icon:active svg {
  fill: #FFF;
}

.social-label {
  display: inline-block;
  margin-right: 15px;
}

Im Anhang ein Screenshot mit den verwendeten Feldern.

Viele Grüße

David

Anton · ‎Feb 2, 2023

Hi @Dtischlinger,

danke für den Code und Screenshot.

Versuche bitte den code des icons wie folgt zu ändern

von:

{% icon
        extra_classes='social-links__icon',
        name='{{ social_icon }}',
        purpose='semantic',
        style='SOLID',
        title='{{ item.accessibility.title }}',
        unique_in_loop=True
      %}

Zu

{% icon
        extra_classes='social-links__icon',
        name='{{ social_icon }}',
        purpose='semantic',
        style='SOLID',
        title='{{ item.accessibility.title }}',
        unique_in_loop=True
        icon_set="{{ icon.custom_icon.icon_set }}"
      %}

Grüße

Anton

Dtischlinger · ‎Feb 2, 2023

Hallo @Anton,

vielen Dank für deine Rückmeldung.

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?

Viele Grüße

David

Anton · ‎Feb 3, 2023

Hi @Dtischlinger,

du brauchst keine zusätzliche Variable erstellen, da sie bereits im icon enthalten.

Versuche bitte folgenden Code

{% icon
        extra_classes='social-links__icon',
        name='{{ social_icon }}',
        purpose='semantic',
        style='SOLID',
        title='{{ item.accessibility.title }}',
        unique_in_loop=True
        icon_set="{{ item.custom_icon.icon_set }}"
      %}

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.

Grüße

Anton

Dtischlinger · ‎Feb 3, 2023

Hallo @Anton ,

ich habe ausprobiert, den Code zu ändern, allerdings scheint es nicht geklappt zu haben:

https://www.loom.com/share/6ce5f852de18455198a07f6cffc9e241

Habe ich das soweit richtig gemacht?

Danke dir!

Viele Grüße

David

Anton · ‎Feb 2, 2023

Hi @Dtischlinger,

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:

social icon(for-loop/Repeater Gruppe)
- Icon name(entweder normaler text oder Auswahl)
- Social Link(URL)

der Code(HTML+Hubl) schaut wie folgt aus:

{% 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>

viele Grüße

Anton

CMS Development