How to combine text and image

I want to put a pin pointer icon side a city name and this icon isn’t a symbol or image format is PNG or SVG.
image is 143826_pointer_location_pin_icon (1)

How are you trying to display it in the app? Which component are you using?

collection>Items Data>description

If it’s just to replace the pin, I’ve done it with css.


/*Change mapbox icon to TT flag*/

.mapboxgl-marker {
background: url('') center/contain no-repeat; filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5)); 


.mapboxgl-marker > div > svg > path, .mapboxgl-marker > div > svg > circle {
display: none;

Check here for more styling options. CSS Library

If this works for you, the original technique is here: CSS Library

I just want to display in a field, not on the map

ok. @Himaladin might be able to help


Use custom CSS with the ::before pseudo class.
Can you provide a screenshot so I can be more sure of what you mean.

1 Like

I would probably consider creating a little bit of HTML in a template column that joins the image and text together, and then use a custom collection to display it in a rich text component inside the custom collection container.


currently I’m in Free Plan so I can’t use CSS

If what you want to achieve is a list, follow the path described by @Jeff_Hager. I included the HTML code:

Screenshot 2024-05-18 at 05.42.56

<div style="position: relative;">
    <img src="" alt="Sample Image" style="float: left; width: 30px; margin-right: 10px;">
    <div style="display: inline-block; padding-top: 8px; padding-bottom: 8px; font-size: 16px;font-weight:bold;">

I created a template column like below

I replaced img src link address with my image link address and TEXT with my text

Put a rich text component on the screen and point it to your template column


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.