How can we add country flags instead of colored tags

connectingindians

Hello Team,

First of all Happy New Year! and we are excited to announce that our website ConnectingIndians.com re-launched from wordpress to flarum. Till now all OK.

we need to add country flag icons for tags. we did not find any font awesome icons for country flags. Is there any other way to add country flag icons instead of colors. For Ex below are our Forum Tags with different colors, but we need country flags..

Thank you.

CI Forum

clarkwinkelmann

connectingindians this can be achieved with CSS. You can set a custom value as the tag icon in the tag settings. That value will be set as an HTML class on the icon element. You can then set a custom background and style based on that class.

This has been discussed multiple times on the forum before. Unfortunately, it seems no one has shared their code/process so I cannot find any example.

The only leads I have are here https://discuss.flarum.org/d/15803-how-could-i-replace-icons/3

Maybe someone has code they can share, or maybe they know of a discussion I missed.

connectingindians

clarkwinkelmann

Thank you, your suggestion worked!

CI Flas

Here are steps to achieve that:

download flag images from this link Icon finder and save them on your server
update tags icon value in admin section(Tags) ex: fas fa-de
add cusstom css in admin section like below:

i.fa-de  {
    content:"";
    background-image:url('https://pathtoflagimage_onyour_server/de.png');
    width: 16px;
    height: 12px;
    display: inline-block;
    background-position:center;
    background-size:cover;
}

That's it!

Thank you.

clarkwinkelmann

connectingindians thanks for sharing! This will be useful to others I think!

PS: the icon name doesn't need to look like a FontAwesome icon name at all. But it's probably best to use a prefix to prevent any conflict (fas fa- prefix could be replaced with countryicon- for example)

connectingindians

clarkwinkelmann agrees with you.

Thanks

fakruzaruret

I can use country codes to show their flag icons in disussions entries. This does not work when I write country code to tag name. This is not required feature but may be added.

🇩🇪 🇹🇷 🇳🇱

🇩🇪
- 🇹🇷
  - 🇳🇱

🇩🇪
🇹🇷
🇳🇱

clarkwinkelmann

fakruzaruret emojis !== icons

You can set an emoji as the CSS content of an icon using a similar trick to the image background.

Pollux

For those who still struggle:

Let's assume, we call the symbol for our newly created tag flag-de. Then we have to add the following style rule to the Appearance > Custom Styles section of the admin panel:

.Button-icon.icon.flag-de {
    content: url(https://cdn.jsdelivr.net/gh/twitter/twemoji@13/assets/72x72/1f1e9-1f1ea.png);
}

To find out the url of your flag, just create a test post and include :flag_de: which renders as 🇩🇪. Then inspect-element the flag with your favorite browser tool and copy the source of the image, in our case https://cdn.jsdelivr.net/gh/twitter/twemoji@13/assets/72x72/1f1e9-1f1ea.png.