Minimal Theme - trouble adding LinkedIn icon to footer

Technical Q&A
1

I’m trying to add an icon for LinkedIn to the social media section of my footer. I can get the space where it should be to link properly (and hovering over the space to the right of the other icons brings up the tooltip for the link), but the icon isn’t showing up.
How can I get the icon to show up?

website: https://artbypottle.myshopify.com

pass: jillpottle

1 Like
2

Some Shopify themes use a library called IcoMoon for the icons they use. The problem that you’re seeing is those themes don’t import all of the available icons. So although IcoMoon provides a LinkedIn icon, it hasn’t been imported.

Rather than having you swap a bunch of font files out and changing CSS code, the easiest thing to do is use a different font.

  1. Go to your theme.liquid file. Somewhere in the head (after the first meta tag could be a good place), paste this code
  1. In your social-links.liquid file, paste this code right before the at the very bottom.
- [
    
      LinkedIn
    ](https://linkedin.com)
  1. Because this is using a different font, we have to change the size of it to better match the current one. Go to timber.scss.liquid and find where the styling is for the footer icons. It should be somewhere around line 1730, starting with .social-icons li. Add a .fab class with a slightly larger font. That block of code should look like this once done
.social-icons li {
  margin: 0 ($gutter / 3) ($gutter / 2);
  vertical-align: middle;

  @include at-query ($min, $postSmall) {
    margin-left: 0;
  }

  .icon {
    font-size: 22px;
    line-height: 22px;
  }

  .fab {
    font-size: 24px;
    line-height: 22px;
  }

  a {
    color: $colorFooterSocialLink;

    &:hover {
      color: darken($colorFooterSocialLink, 10%);
    }
  }
}

This will get it working. If you want to make it a configurable option when you customize the theme, copy what the code is doing for the other icons and add new code for your LinkedIn icon.

2 Likes
3

It works! Thank you :slightly_smiling_face:

4

Thank you!