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
5581 641 1503

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

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
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
2272 342 936

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 😄
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
2272 342 936

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 😄
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
2740 512 695

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