How to adjust size of specific social media footer icons / Dawn theme

Store Design
1

Hey Guys,

I followed this tutorial to upload custom SVG social media icons. I am able to adjust the size of all of the icons by editing the values of the height and width in the assets/ component-list-social.css file.

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

What would be the best way to edit the size of specific icons in this case?

1 Like
2

Please share with me your store URL and password if password protected. I will give you a solution after review on the page

Hope this can help you solve the issue

Best regards,

PageFly

3

Hey @Andres99 It can be much easier if in the liquid provided in the tutorial if in each social icons markup there is a class indicating which icon it is. So be sure to look for that first.

Or add your own I.E.

Before

{%- if settings.social_facebook_link != blank -%}
  - {%- render 'icon-facebook' -%}
        Facebook
    
  

{%- endif -%}

After

{%- if settings.social_facebook_link != blank -%}
  - {%- render 'icon-facebook' -%}
        Facebook
    
  

{%- endif -%}

Then just target it directly:

.social_icons__facebook {

}

if there is not an indication in the html source as to which icon is which, i.e. like the facebook elements gets a .facebook class, then you will need to either try to use an attribute selector that fuzzy matches the url or the CSS nth selector.

.social-icons__link[href*="facebook"] {
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

.social-icons__link:nth-child(3) {
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Selectors may need to be adjusted to select the svg elements or parents of it.

Goodluck.

1 Like
4

Hi @Andres99 , welcome to Shopify Community.

If it is a specific height you are looking to implement to all icons, please remove the width by adjusting the code as below:

.list-social__item .icon {

height: 3.6rem;

}

Hope this suggestion is useful for you, let us know if you require further assistance!

Best regards,

Layoutbase - Homepage & Blog Page-builder App

1 Like
5

Hello @Andres99 ,
Please share your store URL.

6

Hi @PaulNewton ,

Thanks for your response and feedback!

I went ahead and tweaked the suggestion a little and was able to adjust individual icons.

Using Facebook as an example, I added the class (.social_icons__facebook) to the footer.liquid and to the snippets/icon-facebook.liquid.

I then added the following to the components-list-social.css file:

.social_icons__facebook .icon {

height:5rem !important;

width:5rem !important;

}

I am still able to customize the general size of icons by using the pre existing target since I added the !important to overwrite the size for the custom icons.

1 Like
7

Could you take a look at mine please?

I am working with this website https://royal-kidz-inc.myshopify.com/

password geacra

I added custom icons by replacing the svg’s but the size on footer is a mess. How can I make all icons the same size and a little smaller than facebook/insta/twitter?

I added code but it did not work

.footer__list-social .list-social__item svg {
    width: 70px !important;
    height: 70px !important ;
}

Thanks for your input