Why are my Dawn Theme images blurry in the Icon with Text block?

Store Design
1

Hello,

I am using the Dawn Theme and I created a theme block (Icon with text).

Here is my code:

{%- when 'text_with_icon' -%}       

{{ block.settings.text }}

 
    {
      "name": "Text with icon",
      "type": "text_with_icon",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "label": "Texte"
        },
        {
          "type": "image_picker",
          "id": "icon",
          "label": "Icone"          
        }
      ]
    },

The problem is that the image (icon) is shown very blurry.

I tried to do the same block using Custom liquid and I don’t have this blur problem.

Here is the CSS of the Custom liquid:

.custom-text img {
  height: 18px;
  width: 18px;
  vertical-align: middle;
}

Do you have any idea how to solve this ?

Thanks for your support

2

Hello @zied_drira :waving_hand:

The icon might have space around, so you can try increase the size

Hope that helps!

3

@zied_drira - can you please share your page link where you have this icon?

4

Hi @zied_drira ,

Please change all code here:

Screenshot.png
Screenshot.png930×615 23.8 KB

img_url:'24x'

=>

img_url: 'master'

Hope it helps!

5

Sorry, it is a non published theme (working on it before get it published). How can I share a preview ?

6

Thank you. I’ve tried this but it enlarges the icon.

The right size I want is 24x.
Should I draw the icons smaller ?

7

Here is a screenshot of both img_url and custom liquid render.

1DD901F9-2BE9-464D-9FCD-AEA288DDDB04.jpeg
1DD901F9-2BE9-464D-9FCD-AEA288DDDB04.jpeg882×773 47.6 KB

8

Hi @zied_drira ,

Please change code:

Hope it helps!

1 Like