FROM CACHE - en_header

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 1512

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 15 (15)
Zworthkey
Shopify Partner
5581 642 1512

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

Flavourez
Tourist
3 0 1
Zworthkey
Shopify Partner
5581 642 1512

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 1512

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

@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
23 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
23 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
23 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);
}