How can I enlarge and colorize social media icons on my homepage?

Store Design
1

I wanted social media icons on my front page. I got this code for the icons. Also I was able to code them in the middle.

I need help making the icons larger. Also if there is a way to make the icons their original colors instead of just plain black.

Thanks.

2

hii, @Jsteves
Kindly share your store URL so,
I can solve it perfectly.
Thank You.

3

I am working on an unpublished version of Broadcast right now. My live site is not the one I am working on. Would I have to provide collaborator access for you to be able to access the theme?

4

You can share a preview link. If you go to actions > preview on the unpublished version, a little bar will pop up at the bottom of the screen that has a close preview and share preview button. You can share your preview here and it’ll expire sometime after.

5

Ok so I was able to manage to get the icons the size that I want them as on desktop view. I also was able to place them where I wanted to in the home page. However, the last thing I need is for the icons to size down when in mobile view. Is that a possibility? I made a new section using my code. I have pasted it below.

Preview of my shop

https://32mktjhdy7smm6gu-56947867833.shopifypreview.com


  

{% schema %}
{
"name": "Social Media Icons", // Section name
"settings": [
{
"id": "section-heading",
"type": "text",
"label": "Heading 1"
},
{
"id": "section-large-heading",
"type": "text",
"label": "Heading 2"
},
{
"id": "description",
"type": "textarea",
"label": "Description"
},
{
"id": "view-btn-link",
"type": "url",
"label": "Button URL"
},
{
"id": "view-btn",
"type": "text",
"label": "Button name"
}
],
"presets": [
{
"name": "Social Media Icons",
"category": "ADVANCED LAYOUT"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

      
      

### SOCIAL

  
      
     
{{ 'instagram-1.png' | asset_url | img_tag | link_to: 'https://instagram.com/', 'INSTAGRAM' }} 
  
  
{{ 'tik-tok-1.png' | asset_url | img_tag | link_to: 'https://www.tiktok.com/', 'TIKTOK' }}  
  
  
{{ 'facebook-_1.png' | asset_url | img_tag | link_to: 'https://facebook.com/', 'FACEBOOK' }}
  
      
{{ 'twitter-1.png' | asset_url | img_tag | link_to: 'https://twitter.com/', 'TWITTER' }} 

  
{{ 'pinterest-1.png' | asset_url | img_tag | link_to: 'https://www.pinterest.com/', 'PINTEREST' }}
6

You can add this to the bottom of your theme.css.liquid file:

@media(max-width:767px){
a[title="INSTAGRAM"] img, 
a[title="TIKTOK"] img, 
a[title="FACEBOOK"] img, 
a[title="TWITTER"] img, 
a[title="PINTEREST"] img {
    width: 15%;
    }
}
7

I tried that code but it did not work. The icons are not resizing to fit on one line. Instead, three icons are on one line and the other two icons drop down to a second line.

8

Hello @Jsteves ,

Please share:

  • your store URL;
  • page URL with the issue you mention;
  • storefront password (if your store has one).

If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL.

Kind regards,
Diego