Narrative Theme - Add TikTok Logo Next to Other Default Social Logos

[eberisha]

Hi Kailasachse

Idk why Ketan has to be so complicated ... simply go to your Code Editor -> Snippets -> icon-tumblr.liquid  and then delete the SVG-Code which is already there and insert your new TikTok SVG-Code --> and you´re done

[kailasachse]

Haha, thank you! 

I dug into the code but no snippets specific to icon-tumblr.liquid.

I did switch tracks and start working in Minimal, theme, though, so the code must be hiding elsewhere.

Any ideas on where?

I've checked theme.scss and footer.liquid.

Best,
Kaila

[suyash1]

@kailasachse - can you please share your website link? what exactly do you want to delete?

[sprites]

Hi, Kaila!

I just did this for a client on the Minimal theme and had the same question as you.

I found that the icons are part of an "icons font" where every icon is mapped to a specific value, for example: Instagram's icon is e903. I didn't touch that font, because it is everywhere almost in every icon all over the theme.

So... I found another approach using SVG icon files:

1. Over the social_links.liquid file I added this code, so my client would change the links herself: 

  {%- if settings.social_tiktok_link != blank -%}
    <li>
      <a class="icon-fallback-text" href="{{ settings.social_tiktok_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Tiktok' }}" target="_blank" aria-describedby="a11y-new-window-external-message">
        <span class="icon icon-tiktok" aria-hidden="true"></span>
        <span class="fallback-text">Tiktok</span>
      </a>
    </li>
  {%- endif -%}
  {%- if settings.social_patreon_link != blank -%}
    <li>
      <a class="icon-fallback-text" href="{{ settings.social_patreon_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Patreon' }}" target="_blank" aria-describedby="a11y-new-window-external-message">
        <span class="icon icon-patreon" aria-hidden="true"></span>
        <span class="fallback-text">Patreon</span>
      </a>
    </li>
  {%- endif -%}
  {%- if settings.social_society6_link != blank -%}
    <li>
      <a class="icon-fallback-text" href="{{ settings.social_society6_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Society6' }}" target="_blank" aria-describedby="a11y-new-window-external-message">
        <span class="icon icon-society6" aria-hidden="true"></span>
        <span class="fallback-text">Society6</span>
      </a>
    </li>
  {%- endif -%}

 2. Edited my settings_schema.json to reflect what I did over the social_links file:

      {
        "type": "text",
        "id": "social_tiktok_link",
        "label": {
          "en": "Tiktok",
          "es": "Tiktok"
        },
        "info": {
          "en": "http:\/\/tiktok.com\/username",
          "es": "http:\/\/tiktok.com\/username"
        }
      },
      {
        "type": "text",
        "id": "social_patreon_link",
        "label": {
          "en": "Patreon",
          "es": "Patreon"
        },
        "info": {
          "en": "http:\/\/patreon.com\/username",
          "es": "http:\/\/patreon.com\/username"
        }
      },
      {
        "type": "text",
        "id": "social_society6_link",
        "label": {
          "en": "Society6",
          "es": "Society6"
        },
        "info": {
          "en": "http:\/\/society6.com\/username",
          "es": "http:\/\/society6.com\/username"
        }
      },

 3. Added the SVG files to my assets folder:

4. And added the styling over my custom CSS file: 

/* Social icons */
.icon-tiktok:before, .icon-patreon:before, .icon-society6:before {
  content: "";
  display: flex !important;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  background-size: cover;
}
.icon-tiktok:before {
  background: url('{{ "ico-tiktok.svg" | asset_url }}');
}
.icon-patreon:before {
  background: url('{{ "ico-patreon.svg" | asset_url }}');
}
.icon-society6:before {
  background: url('{{ "ico-society6.svg" | asset_url }}');
}

And now I have my custom icons  

Please let me know how it goes for you, and mark the question as solved if this guide helped you. Thanks!

Donato

[growwithgrease]

Where do you get the icon from? 

[sprites]

https://www.svgrepo.com/vectors/tiktok/

[growwithgrease]

I get the option to choose Tiktok under social media button but no under footer theme button. And the icon will not show. Any ideas for me please?

Thank you

Brady