Size social media icons footer Dawn

[Flavourez]

Hi,

I tried to make the social media icons in the footer of my Dawn theme a bit bigger, but the tutorials that are available for this, only seem to work for the older themes. Is there any way to change the size of these icons?

[Zworthkey]

@Flavourez 
Hi,
Welcome to the Shopify community.
kindly Share your Store URL.

[Flavourez]

The store url is https://flavourez.myshopify.com/

[Zworthkey · Accepted solution]

.list-social__item .icon {
    height: 9.8rem !important;
    width: 3.9rem !important;
}

@Flavourez 
Add this code in component-list-social.css file.
Thank you

[Flavourez]

@Zworthkey

Thanks a lot, this works like a charm!

[Zworthkey]

@Flavourez 
Welcome.

[Afairy]

---

@Zworthkey wrote:

.list-social__item .icon {
    height: 9.8rem !important;
    width: 3.9rem !important;
}

@Flavourez 
Add this code in component-list-social.css file.
Thank you

---

Can this work also for the header icons? (cart and search). I've tried and did not manage to!

[Dogismybestfrie]

Hello @Zworthkey 

I added this code but this happens, any suggestions?

Thank you

[Zworthkey]

@Dogismybestfrie 
Welcome to the Shopify community!
Thanks for your good question.

Please share your store URL.
So that I will check and let you know the exact solution here.

[halflifecrysis]

@Zworthkey - Hmmm, I am having the same issue as @Dogismybestfrie  with Tiktok, any ideas?

 

[MF41]

I have the same problem, any solution?

[ImagePixie]

Hi @MF41 @halflifecrysis @Dogismybestfrie I'm not a professional coder or Shopify partner -- just tinkering with my own store and ran into the same issue with the TikTok icon.

I looked at the SVG code in icon-tiktok.liquid and noticed that it was different from the other icons in that it has "width" and "height" instead of viewBox settings.

After swapping out "width=16" height="18" for viewBox="0 0 16 18", the TikTok icon scaled up along with the rest of the icons.

Was:

<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-tiktok" width="16" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M8.02 0H11s-.17 3.82 4.13 4.1v2.95s-2.3.14-4.13-1.26l.03 6.1a5.52 5.52 0 11-5.51-5.52h.77V9.4a2.5 2.5 0 101.76 2.4L8.02 0z" fill="currentColor">
  </svg>

I changed mine to:

<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-tiktok" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M8.02 0H11s-.17 3.82 4.13 4.1v2.95s-2.3.14-4.13-1.26l.03 6.1a5.52 5.52 0 11-5.51-5.52h.77V9.4a2.5 2.5 0 101.76 2.4L8.02 0z" fill="currentColor">
  </svg>

My store is still in development, but this is what I ended up with:

Hope this helps.

[halflifecrysis]

On Dawn, this change did not make the Tiktok icon get bigger for me. I still have large everything else (Pintrest, FB and Insta) and a tiny TikTok. Are you on Dawn? Weird that it worked for you. 

[MF41]

@ImagePixie Tnx,, it is working for me

[ImagePixie]

I'm using Dawn and started with the edit to component-list-social.css shown in the accepted solution, although since last night I've made further edits and the TikTok icon is still sizing up for me. I changed height and width to 3rem, removed the !important and removed the previous styling (which the !important served to overwrite). Here is what my current component-list-social.css is looking like. Flex-end commented out until I figure out if I want to keep it.

.list-social {
  display: flex;
  flex-wrap: wrap;
  /*justify-content: flex-end;*/
}

@media only screen and (max-width: 749px) {
  .list-social {
    justify-content: center;
  }
}

.list-social__item .icon {
  height: 3rem;
  width: 3rem;
}


.list-social__link {
  align-items: center;
  display: flex;
  padding-right: 1.3rem;
  color: rgb(var(--color-foreground));
}

.list-social__link:hover .icon {
  transform: scale(1.07);
}

[StrangeSpecies]

@ImagePixie This is the way. I was boggled when I was seeing the width and height set manually when I inspected the element, but I couldn't figure out where to change it. Thank you for that! Now my only problem is that 0 0 16 18 sets my icon slightly larger than the others, and even after reading up on it I'm just mystified by the viewBox attribute because changing the values doesn't ever do what I expect it to. I have no idea how to nudge it a little smaller... but I'll take too large over it being a weird tiny speck instead. 😄 Thanks for this fix!

[SitScope]

Perfecto! It worked for me... Thank you very much for your kind support.

[halflifecrysis]

Very nice! 

You wouldn't happen to have a line of code to make the Facebook Icon Blue and the Instagram Purple would you? 

They look rather drab just in black. Thanks for your help!

Scott