Help Coding - Larger Icon sizes

Jsteves
New Member
5 0 0

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. 

 

<div style="text-align:center;margin-left:auto;margin-right:auto">

<a href="{{ settings['social_instagram_link'] | escape }}" target="_blank" >
{% include 'icon-instagram' %}
</a>

<a href="{{ settings['social_tiktok_link'] | escape }}" target="_blank" >
{% include 'icon-tiktok' %}
</a>

<a href="{{ settings['social_facebook_link'] | escape }}" target="_blank" >
{% include 'icon-facebook' %}
</a>

<a href="{{ settings['social_pinterest_link'] | escape }}" target="_blank" >
{% include 'icon-pinterest' %}
</a>

<a href="{{ settings['social_twitter_link'] | escape }}" target="_blank" >
{% include 'icon-twitter' %}
</a>

Replies 7 (7)
Zworthkey
Shopify Partner
2535 301 634

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

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
Jsteves
New Member
5 0 0

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?

Ninthony
Shopify Partner
2247 339 900

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.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
Jsteves
New Member
5 0 0

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

 

 

 

<!-- Social Media Icons section starts -->
<section class="Social Media Icons">
<div class="container">
<div class="Social Media Icons-outter">
{% if section.settings.section-heading != blank %}
<h2 class="section-heading">{{ section.settings.section-heading }}</h2>
{% endif %}
{% if section.settings.section-large-heading != blank %}
<h1 class="section-large-heading">{{ section.settings.section-large-heading }}</h1>
{% endif %}
{% if section.settings.description != blank %}
<p class="discription">{{ section.settings.description }}</p>
{% endif %}
</div>
<div class="col-xs-12 col-md-12 text-center">
{% if section.settings.view-btn != blank %}
<button class="view-btn">
<a href="{{ section.settings.view-btn-link }}">{{ section.settings.view-btn }}</a>
</button>
{% endif %}
</div>
</div>
</section>
<!-- Social Media Icons section ends -->  


{% 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 %}



    <!-- CUSTOM SOCIAL MEDIA ICONS  -->  
      




<h3 style="text-align: center;"><span style="color: #000000;">SOCIAL</span></h3>

<div style="text-align:center;margin-left:auto;margin-right:auto">  
      
     
{{ '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' }} 
  

      
  <!-- END SOCIAL MEDIA ICONS -->   

 

Ninthony
Shopify Partner
2247 339 900

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%;
    }
}
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
Jsteves
New Member
5 0 0

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.

diego_ezfy
Shopify Partner
2298 413 538

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

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.