[Resolved] how to add icon into category name?

[Trạng]

hi there, i want to add this icon 🔥 into the trending category name but there’s error when I do that. How is it possible? PLease help to do it.

Screenshot

[Fernando]

Hi Trang,

By default, some servers don’t allow such “emojis” to be added on the backend or on your site. Perhaps your server is one of those.

For reference, can you provide the link to where we can see where you want that added?

[Trạng]

Hi Fernado, I want to add it into my homepage menu. I place my homepage url in private section. Please help to check.

About the server, so let’s say I will contact the hosting service to allow me add emoji? right?

[Fernando]

Yes, it’s a server related thing or something else.

We can also try adding it through Custom CSS. If you’re okay with this, can you create a Post with that category, and I’ll figure out if it’s possible?

[Trạng]

I already created post inside “trending 2023” category. Please help to check!

[Fernando]

Can you try adding this through Appearance > Customize > Additional CSS?:

a[rel="category tag"][href="https://dinhbatrang.com/xu-huong/" ]::before {
    content:"🔥 ";
}

[Trạng]

Thank you. after adding your css code, I manually place that emoji into Category name. It displays well now hehe. Thank you so much Fernando.

So with GP premium, can I add a highlight button into the menu section, mate? Can you give me some advice

[Fernando]

Can you provide an example of a “Highlight button”? Are you referring to something like the Donate Button here?: https://gpsites.co/donate/

[Trạng]

Yup something like that or like this one

[David]

Hi there,

this article explains how to make a navigation menu item look like a button:

https://docs.generatepress.com/article/adding-buttons-navigation/

The CSS can be adjusted to suit the style, but that will get you started.

[Trạng]

hi Fernando bro, what if I want to add another category with another icon? Let’s say “✍️ Misc” category?

[Fernando]

In this code:

a[rel="category tag"][href="https://dinhbatrang.com/xu-huong/" ]::before {
    content:"🔥 ";
}

Just replace “xu-huong” with the category slug.

Replace 🔥 as well.

[Trạng]

So let’s say every time I want to add a new category with an icon, I add 1 line of css code similar to what you provided and replace the icon & slug, this new line of code will be below that one has already existed, right?

[Fernando]

Yes, that’s correct.

The alternative would be to reach out to your hosting provider to check if those emojis are not allowed by the server or some security system.

I tested 🔥 on my website and it worked. So it must be a server/security thing for your site.

[Trạng]

perfect, thank you a lot Fernando. Your support is so lit 🔥

[Author]

Posts