What's your biggest current challenge? Have your say in Community Polls along the right column.
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: Size social media icons footer Dawn

Solved

Size social media icons footer Dawn

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)
Zworthkey
Shopify Partner
5581 642 1583

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 18 (18)

Zworthkey
Shopify Partner
5581 642 1583

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

Flavourez
Tourist
3 0 1
Zworthkey
Shopify Partner
5581 642 1583

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 1583

@Flavourez 
Welcome.

Afairy
Tourist
5 0 4

@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
Visitor
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 1583

@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
26 1 1

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

tiktok.png

MF41
Tourist
4 0 1

I have the same problem, any solution?

ImagePixie
Visitor
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
26 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
4 0 1

@ImagePixie Tnx,, it is working for me

ImagePixie
Visitor
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
Tourist
6 0 2

@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
Visitor
1 0 0

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

halflifecrysis
Excursionist
26 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

EstebanPenagos
Excursionist
16 0 3

Hi, I hope you're doing well,

I have the same request for some help to make the social icons bigger on mobile and desktop

URL: https://modacol.myshopify.com

 

Is there a way for you to help me address this issue?