claudios claudios - 21 days ago 5
CSS Question

Proper way on putting images as sources in assets shopify

I've been stuck in showing custom social on top of shopify theme. I tried the

{{ 'icon.png' | asset_url }}
but it won't display. Instead when I check the element in the browser it automatically generates a style which is
display: none !important;
. I don't know where or what I'm missing.

Here's my code below:

<div id="smash-social" class="grid__item medium-up--two-fifths text-right">
<a href="https://www.facebook.com/link" target="_blank">
{{ 'facebook-logo-button.png' | asset_url }}
</a>
<a href="https://twitter.com/link" target="_blank">
{{ 'twitter-logo-button.png' | asset_url }}
</a>
</div>

Answer

Add the img_tag filter to generate an img HTML element complete with an alt attribute:

{{ 'facebook-logo-button.png' | asset_url | img_tag: 'facebook' }}