Do you like to add emoji icons to your OptimizePress pages, and have had issues with them showing super large like this?
There are a couple of solutions for this.
As of June 12th, 2024, OptimizePress has released a fix for a bug in Google Chrome that was causing an issue similar to this. Please ensure you are using the OptimizeBuilder version 1.1.76 or newer.
If you are using OptimizeBuilder 1.1.76, or a newer version, and still have this problem, then one of the solutions below should help as the issue is most likely due to hosting configuration or use of CDN such as Cloudflare.
Solution 1
OptimizePress has a way to disable the WordPress Emoji scripts so your browser can load the emojis. Here are the steps to turn this on:
1) Navigate to "OptimizePress" in your WordPress dashboard, and click on "Optimizations"
2) Scroll down and turn on the "Disable Emojis" feature.
If you still see the issue after clearing all cache, please try other solutions on this page.
Solution 2 (best method): Use Custom CSS Code
The first solution would be to add the below CSS code to your site.
img[src^="https://s.w.org/images/core/emoji"] {
max-width: 1em;
height: auto;
}Special thanks to KM Lee for the CSS Code
If you are using the Smart Theme, this would be easy to do. Just head over to "Appearance > Theme Options > Custom Scripts" and add the Custom CSS code there.
Solution 3: Add CSS Code to Code Manager Plugin
Another solution would be to add the CSS code to a code manager plugin, such as one of the following:
Header Footer Code Manager
img[src^="https://s.w.org/images/core/emoji"] {
max-width: 1em;
height: auto;
}In order to make sure the fix is loaded on all pages, make sure to choose the options in one of those plugins to do that, such as "all pages" or "all posts" or "sitewide" (we suggest the sitewide option if possible).
Solution 4: Install the OptimizePress Emoji Size Fix Plugin
If you are using something other than the Smart Theme, and don't have a way to add global CSS code (or don't want to use a plugin from the 2nd solution above), you may use the following plugin (provided as-is). The plugin only adds the CSS globally and doesn't require any settings or updates. You may use this plugin, but if it causes any issues then we would suggest to add the CSS code using one of the other solutions on this page.
Download the OptimizePress Emoji Size Fix plugin here
To install the plugin, just go to "Plugins > Add new" and click "Upload" and upload the zip file. Then activate the plugin.
Siteground Hosting Fix
If you are hosting your site on siteground and the setting in OptimizePress Optimizations is not working to solve the issue, then you'll want to go into the Speed Optimizer plugin settings and disable the emojis from there. Here are the steps:
1) navigate to "Speed Optimizer" and then click "Frontend"
2) Click the "General" tab
3) Turn on the "Disable Emojis" feature. This will ensure the emojis are not loaded through WordPress and will instead rely on your browser.
