I'm getting a simplified version of emojis

programming web dev
1

My emojis are rendering flat when pasted into my code editor. Meaning that they lack gradients. I attached a screenshot.

If I insert them through CSS they look fine.

Thanks for the help!

Below is the correct heart(CSS). And the flat version pasted into .php Wordpress HTML.

Screen Shot 2022-09-22 at 8.06.11 AM
Screen Shot 2022-09-22 at 8.06.11 AM882Ă—510 130 KB

https://family500.org/

2

Hi Aaron,
I had a look at your site and your emoji is an svg image which had a single path tag…

Right now your image is just a shape with a fill, theres no gradient effects applied…

3

Images pasted into a code editor are the unicode (~text) versions. They are OS/platform specific: https://emojipedia.org/red-heart/

If they are converted by your platform as an image, then they will look exactly as defined by the image. For example, most emojis on the forums here use Twitter’s twemoji set to keep it consistent.

4

Is there any way to keep that from happening? I would like to always show the more detailed version of emoji, not the flat SVG versions.

5

The SVG versions are the more detailed versions :slight_smile:

If I understand what you are saying, you want to use emojis in your code editor. The emojis in your code editor will almost always be the system default one, not the more detailed SVG versions that you may see when Wordpress automatically converts them when you are previewing them. That your system default emojis from the code editor get turned into more detailed versions is a Wordpress feature.

7

Ok this allows the detailed version of emojis in wordpress.
Add to functions.php


/**
 * Disable the emoji's
 */
function disable_emojis() {
  remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
  remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
  remove_action( 'wp_print_styles', 'print_emoji_styles' );
  remove_action( 'admin_print_styles', 'print_emoji_styles' );	
  remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
  remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );	
  remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
  
  // Remove from TinyMCE
  add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
}
add_action( 'init', 'disable_emojis' );



/**
 * Filter out the tinymce emoji plugin.
 */
function disable_emojis_tinymce( $plugins ) {
  if ( is_array( $plugins ) ) {
    return array_diff( $plugins, array( 'wpemoji' ) );
  } else {
    return array();
  }
}
1 Like
8

Glad you got it working! :slight_smile:

9

You can expect that if they are converted to an image by your platform, they will appear exactly as you have defined in the image. A good example would be the use of Twitter’s emoji set for most emojis on the forums here so that everything is consistent.