FROM CACHE - en_header

Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!

Size social media icons footer Dawn

Solved
Flavourez
Tourist
3 0 1

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?

Accepted Solution (1)

Accepted Solutions
Zworthkey
Shopify Partner
5581 642 1530

This is an 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

View solution in original post

Replies 16 (16)
Zworthkey
Shopify Partner
5581 642 1530

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

Flavourez
Tourist
3 0 1
Zworthkey
Shopify Partner
5581 642 1530

This is an 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
Tourist
3 0 1

@Zworthkey

Thanks a lot, this works like a charm!

Zworthkey
Shopify Partner
5581 642 1530

@Flavourez 
Welcome.

Afairy
Tourist
5 0 3

@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
New Member
1 0 2

Hello @Zworthkey 

I added this code but this happens, any suggestions?

Thank you

Screen Shot 2022-02-18 at 3.23.51 PM.png

Zworthkey
Shopify Partner
5581 642 1530

@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
Excursionist
25 1 1

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

halflifecrysis
Excursionist
25 1 1

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

tiktok.png

MF41
Tourist
3 0 1

I have the same problem, any solution?

ImagePixie
New Member
2 0 1

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:

 

ImagePixie_0-1655169264062.png

Hope this helps.

halflifecrysis
Excursionist
25 1 1

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
Tourist
3 0 1

@ImagePixie Tnx,, it is working for me

ImagePixie
New Member
2 0 1

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
New Member
3 0 0

@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!