Display Hero Icon in template

Ask for Help
1

Hello Fellow Gliders, hope you’re all well.

I looked into all queries relating to hero images for this request but found none so far.

I’m trying to display an icon in a template so I can show it in rich text. I used the normal style it didn’t work then I found a similar code that worked when it’s imputed straight but using the same technique didn’t work for the hero in the computed column. I think the SVG encoding are different.

I’ve created the if then else column and it works fine all that’s left is to render the icon, if there’s a better way to do this or I’m making a mistake, I’d appreciate it. Thanks.

indept
my template
the code

2

Give me your code, I’ll help you check it. One thing I see is that you don’t need to encode the viewBox.

3

Hello, thanks it was your reference I used here. Ironic.

<p style="display: inline;">Hello<span style="background:url('data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3.75%2c-3.75%2c31.5%2c31.5' fill='currentColor' aria-hidden='true' color='red' height='128' width='128' style='background-color:transparent'%3e%3cpath fill-rule='evenodd' d='M11.47 2.47a.75.75 0 011.06 0l7.5 7.5a.75.75 0 11-1.06 1.06l-6.22-6.22V21a.75.75 0 01-1.5 0V4.81l-6.22 6.22a.75.75 0 11-1.06-1.06l7.5-7.5z' clip-rule='evenodd'%3e%3c/path%3e%3c/svg%3e') no-repeat center center; width: 1.5em; height: 1.5em; display: inline-block; vertical-align: middle;"></span> Up 361% from last month (may)</p>

The code was in the parenthesis is the code from the hero image I used a template to get it.

template
template972×1211 139 KB

upp
upp838×1215 60.5 KB

4

You can ask GPT to help you identify its errors.

<p style="display: inline;">Hello<span style="background:url('data:image/svg+xml,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'-3.75 -3.75 31.5 31.5\' fill=\'currentColor\' aria-hidden=\'true\' style=\'background-color:transparent\'><path fill-rule=\'evenodd\' d=\'M11.47 2.47a.75.75 0 011.06 0l7.5 7.5a.75.75 0 11-1.06 1.06l-6.22-6.22V21a.75.75 0 01-1.5 0V4.81l-6.22 6.22a.75.75 0 11-1.06-1.06l7.5-7.5z\' clip-rule=\'evenodd\'></path></svg>') no-repeat center center; width: 24px; height: 24px; display: inline-block; vertical-align: middle;"></span> Up 361% from last month (may)</p>
5

Is it working for you?

6

Nicee your code works fine thank you.

I used the code, you provided and not the hero image

but how do I find the URL for each icon?

7

In Glide, SVG tags can’t be used directly; instead, SVG paths are used as backgrounds. The code embeds SVG directly into HTML using a data URI scheme, including the SVG image within the HTML code itself, not at a separate URL.

8

Ohh Okay, here’s what i did, the path you used for this icon how can I get it I also want to duplicate the system for an arrow-down icon.

2024-06-14 14_39_31-Morayo's farm · Glide
2024-06-14 14_39_31-Morayo's farm · Glide1255×862 126 KB

9

The icon you need to use is actually the path data within the SVG, not a URL. SVG icons are defined by their path data, which describes the shape of the icon. Here’s a brief guide on how to get the path data:

  1. Find an SVG Icon: Look for an SVG icon in a library like Heroicons, FontAwesome, or any other icon library.
  2. Copy the Path Data: Once you find the icon, open its SVG code and copy the d attribute from the <path> element. This attribute contains the path data that defines the icon’s shape.
  3. Use the Path Data: Replace the path data in your existing code with the new path data.
2 Likes
10

Awesomeee this works thank you finally gotten it, haha

1 Like