Hello there,
I am having some trouble persisting emojis in my BSS designs.
They do work the first time I add them and while I am editing my design, however they get 'unencoded' when I reopen this document again.
Did anybody experience this same trouble? Do you have any other method to include emojis in your designs without a 3rd party library?
Thanks in advance.
This
https://afeld.github.io/emoji-css/
is extremely easy to implement. A single external stylesheet which you can link right from the Design panel (or you could easily download it and import to BSS if you prefer a local file) and then just insert a code component into your text, delete the "text", and add the appropriate class to it.
Thanks for your fast reply @Printninja.
Adding emojis via CSS was indeed my first-to-go option. This solution works even offline as you correctly pointed out. Even thought of publishing something on the internal online component store to spread out emoji support within the BSS userbase.
Nevertheless, Chrome and many other browsers already support Emojis natively: http://caniemoji.com/os-x/
I suspect that Bootstrap Studio electron wrapper makes use of GrapesJS (https://grapesjs.com/), which works fine with emoji (at least they work on the demo online). However there must be an encoding issue while saving the web component structure to disk.
Knowing this fact, it seems more appealing for our lovely community to report this behaviour as a potential bug. It'd be cool to have out-of-the-box emoji support Bootstrap Studio as browsers do.
@Printninja: I'll definitely use your workaround if there's no solution for this potential bug ❤️
Many thanks!
Even thought of publishing something on the internal online component store to spread out emoji support within the BSS userbase
I like that! Very ambitious idea.
Sure it's a nice challenge, but keep in mind that: - Emoji image references in this URL https://afeld.github.io/emoji-css/emoji.css are also served from some other remote location. - Emojis are PNGs (so not very scalable).
Sorry for jumping in this discussion so late!
Bootstrap Studio does support emoji. Emoji replacement is handled by the OS, but for this to happen you need to add a few special font families at the end of the page's font stack. Here is the default for Bootstrap 4:
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
Those last Emoji fonts are key. We have them in the Blank template, but we have overlooked adding them to the rest. The result is that on those other templates Emoji is represented as unicode symbols.
We will update our templates in the next release. Until then, an easy workaround is to add those same emoji families to your own CSS.