I’ve encountered an issue with emoji rendering in Bricks Builder (latest version). Some emojis are not displaying correctly on the front end, despite being visible in the backend editor. This problem occurs in both basic text and rich text elements.
Steps to Reproduce:
Open a template in Bricks Builder.
Add a basic text or rich text element.
Insert an emoji (e.g., the party emoji ) into the text.
Save the template.
View the page on the front end.
Expected Behavior:
The emoji should appear on the front end as it does in the editor.
Actual Behavior:
Some emojis (like the party emoji ) do not appear on the front end, even after saving and reloading the page.
Additional Observations:
This issue doesn’t affect all emojis; some render correctly.
The problem persists across different text element types (basic and rich text).
Template changes are saved, but problematic emojis are not displayed.
Reloading the page does not resolve the issue.
This inconsistency in emoji rendering can be confusing and frustrating, as it may lead users to believe something is broken as their templates don’t save and might not make the connection that it’s because of an emoji they’re using.
What is the emoji picker you are using? Is that a plugin or a MAC OS X thing? I can can copy & paste the emoji code for Party from emojipedia and it works on the front end.
thank you for your report. I’ve tested locally (macOS, Firefox/Chrome), and I can’t reproduce the issue. I’ve inserted the “party” emoji the same way as you - with the emoji picker.
I’ve tested on header template as well.
Does it only happen on one install, or everywhere? What if you test on some other theme, not Bricks, does that emoji works?
@Matej - good call, it appears that this issue is install specific to the site in my video. This works fine on a pair of other installs… Apparently I have more investigation to do. No clear bug found. THanks!
I had exactly the same problem, and I spent several hours digging down and finding a solution to this. This issue is related to Php, not Bricks. First, you need to go to your hosting’s cPanel and find the Php MyAdmin section. Then follow the instructions below:
On the main screen, you’ll see “Server connection collation” right under General Settings. Click the dropdown menu and choose “utf8mb4_unicode_ci”
Then go to Database section and select the database your website is using.
Click the “Operations” tab.
Scroll down to finf “Collation” section, and select “utf8mb4_unicode_ci” collation here.
Click the “Change all tables collations” checkbox.
A new “Change all tables columns collations” checkbox will appear.
Click the “Change all tables columns collations” checkbox.
Click the “Go” button.
This should fix the emoji problem. If this still doesn’t work, go back to your hosting’s cPanel and click File Manager. Find the Wordpress folder of your website and edit the file called “wp-config.php”.
Find the line: define(‘DB_COLLATE’, ‘utf8’);
Replace the line above with this: define(‘DB_COLLATE’, ‘utf8mb4_unicode_ci’);
Save the file and exit.
This problem was driving me crazy, but it’s such a relief to find the actual problem causing it. I hope this helps everyone!
) into the text.