Tag Icons: FA 5 or b6? Unicode Characters?

crypto

Is a way to use the Admin tag interface to use Font Awesome 5, beta6, or ideally Unicode Characters as tag icons?

crypto

I see, the fas prefix is for FA5, but many of the icons are in their paid set. There is a post that demonstrates how to load FA Pro

I am still interested to know if there is a way to use these: Unicode Emojis?

jordanjay29

crypto the fas prompt is only to give a formatting example of what is expected for the FA icons. You may use any of the Font Awesome 5 free icons regardless of their prefix.

I'd imagine you could use any of the unicode characters in post content. If you're talking about having them accessible via the : prompt like flarum-emoji, that would probably require a separate extension or using one like Flamoji.

ETA: I read your request wrong to begin with.

Sure, you could use a custom icon for any tag. Here's one method, but the concept is pretty much the same regardless of the content. You'd just need to target the specific tag and apply the right character with the font desired.

Doing it natively would require an extension, Flarum offers Font Awesome compatibility just for convenience.

crypto

jordanjay29 Yes, the unicode emojis can be used anywhere there is a typical text field. This includes the actual Tag Title, however, Flarum sets aside an html space for the Tag Icon that is used differently in the navigation, the Tags-page, and in the forum-post-list-view.

I am hoping there is a simple method to use a unicode emoji in the place of the FA tag. Alas, it appears that this requires custom code... thanks for your link above!

jordanjay29

crypto Alas, it appears that this requires custom code...

That's kind of the Flarum ethos here. We provide a framework to build on, and a lot of extensions take that as the challenge to exist. When there's a demand for code to resolve the lack of something, anyone (even you) can create some to plug into Flarum and fill that demand.

Nothing simple exists at the moment to use unicode emojis instead of FA tags. I linked one approach that could be used. The emojis could also be converted to an image format and replaced via CSS that way (which would expand compatibility/ensure consistency since not all devices are on the same unicode version or implement the emojis in the same way).

crypto

lol, we are talking past each other! Too many edits. Thanks for the link, that will work well for me.

crypto

Ahkay ppl... groking the linked post above, I haz come up with a pretty sweet solution:

How to Use Unicode Emojis for Tag Icons

Note that the Icon Enter the name of any FontAwesome icon class, including the fas fa- prefix. form field in the Tags-Extension > Create-Tag modal simply adds arbitrary classes to the respective Tag.

So, you can add your own custom class, like, in my case rc-school as shown:

Then all I have to do is add a content element for that specific class:

.rc-school::before {
    content: "\1f9ec";
}

..and that gives me this:

Thanks to @jordanjay29 and @Pollux

~~Note: It appears that the vertical centering of the Unicode Emoji is too low, but I am not a CSS maestro, so... unless one appears, this is all you get. 😉~~

Someone in another Discord helped me.

Add a second css class to your Tag Icon form field. In my case I used "rc"

Add another css rule to your custom code like this:

.Dropdown-menu > li > a .rc {
    margin-top: -1px;
}

This will (at the time of writing) properly adjust the vertical height of the Unicode Emojis if you are using the default Flarum theme.