XF 2.0 SVG images in drop-downs?

[DragonByte Tech]

I've not tried whether this is possible yet, but I'm wondering whether XF2 drop-downs can contain SVG images (e.g. flags in a country drop-down) and if so, how would I achieve this?

Thanks!


Fillip

 

[Chris D]

I don't think you can include arbitrary non-text content within HTML5 select elements. So that would lead you to having to implement something like our prefix menu. Alternatively you could use the Select2 library as this is likely more flexible.

Alternatively, does Unicode cover all international flags for emojis? They would work directly without issue in a HTML5 select element.

 

[DragonByte Tech]

Considering Unicode flags don't show up correctly for me in Chrome (think my computer may be missing some fonts?) I think using Select2 would be the best solution, thanks


Fillip

 

[Lukas W.]

(think my computer may be missing some fonts?)

Font files are - thanks to specifications - too small to contain all Unicode characters. So you're left with all those the people who built that font file decided would be worth shipping to you. So if both, your current and your systems default fallback font don't contain the requested icon, you see the blank/error icon. Mostly happens to me on mobile, cause my Android device seems to carry a lot of chinese characters, while my Windows supports icons and leaves beforementioned to other language packs.

 

[DragonByte Tech]

Font files are - thanks to specifications - too small to contain all Unicode characters. So you're left with all those the people who built that font file decided would be worth shipping to you. So if both, your current and your systems default fallback font don't contain the requested icon, you see the blank/error icon. Mostly happens to me on mobile, cause my Android device seems to carry a lot of chinese characters, while my Windows supports icons and leaves beforementioned to other language packs.

I just see the two-letter country code instead of the flag:



The font-family for those icons is "Apple Color Emoji","Segoe UI Emoji","NotoColorEmoji","Segoe UI Symbol","Android Emoji","EmojiSymbols","EmojiOne Mozilla"

So I'm guessing I'm missing the Segoe UI Emoji and Symbol fonts.


Fillip

 

[Lukas W.]

It doesn't depend on the font face but the font file. Arial on Windows for example contains other icons than Arial on Android or Arial on Mac. If apple decided to drop country flags in favor for other icons (even though I actually can't imagine that), there's not much use in adding other fonts.