Adding Dynamic Emoji to CMS Content

Design help General
1

I’m trying to add a consistent emoji before a dynamic piece of text in a button in i before

So I have CMS content that’s pulling in various values from two different multi-reference fields.

Number one, I want to have as a button. The category is “Approved” and I want the text of the button to be

:white_check_mark:[name]

The other one is “Not Approved” and I’d like the text of the button to be

:x:[name]

So far, all I’ve been able to do is dynamically pull in the name.

Is there a way to add the emoji before the name for each one without creating them manually?

2

Yes, several ways.

You can design the two buttons, then use conditional visibility to show one and hide the other. Conditional visibility will target your categories.

You can also define the image as a field of your categories. So an image field in your category collection, named “icon of the button”. And you can also define a bg color as a color field if you want.

Now in the Designer, you’ll select the vutton, go to settings tab and click on use bg color and use bg image from a colection, and target the category icon and bg color.

Solution 2 is better. It allows you to change the color and the icons when you want and have to changes pushed to the entire site.

If you have trouble to put that in action, add the icon and color fields to your category collection then generate a sharing link and paste it here.

1 Like
3

So you would add this in the database directly then?

4

Yes. An image field. And it will be dynamic and you’d be able to change it if you want. use SVG for the best versatility.

1 Like
5

But is it possible to include an “image” field with an emoji? Would that be rich text or something else?

Also how would I align it so you can have it

:white_check_mark:Name

Wouldn’t the image just be the background rather than in-line w/ text?

6

You want to emohji to be native emoji, like text emoji? It’s a bit risky as they don’t render the same on various systems.

But anyway, you can have an imge in the collection, and use it as a background image on your dynamic element. It’s possible with webflow (select element, go settings tab and check “use image as background” in the purple otpions. Same can be done with color.) Then you can place the image finely using bg controls in the style panel (add a bg image and don’t specify it, if it’s not automatically created) and padding.

7

It’s not 100% on topic but you can maybe learn a few things reading this post: