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>

0 Likes

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. or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
Buy me a coffee ☕ Donate Us
0 Likes
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?

0 Likes
Ninthony
Shopify Partner
2239 337 895

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
0 Likes
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 -->   

 

0 Likes
Ninthony
Shopify Partner
2239 337 895

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
0 Likes
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.

0 Likes

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 section not looking good or cutting off? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets. Examples here.
◦ In need of coding help? I'm available for hire! ezfycode@gmail.com
0 Likes