Fix the Big Emoji Icons on OptimizePress Pages

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 (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 2: 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

WP Code

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 3: 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.