Making emojis bigger and align with text.

Question

Here is my emoji one fiddle.

https://jsfiddle.net/L8a9zazh/

How do i resize the emojis and make it align in center with text and make it look neat.

Css:

img.emojione {  
 // Override any img styles to ensure Emojis are displayed inline
 margin: 0px !important;
 display: inline !important;
}

Answer 1

Your content should always be placed within HTML tags that give context to what structural component you're trying to build. In the fiddle example below, we encapsulate the emoji inside a span tag which in turn is wrapped in a p tag for the wording content. By doing this, we can target specific CSS on the emoji content to vertical align within the p tag without having to deal with line-height. The font-size CSS property can control unicode characters and font-face content.

Update 1
I see now that you're trying to convert the chars to an image; your jsfiddle was broken because it wasn't using the jquery framework and you don't have to declare onLoad; instead this should all be set in the js settings window pane.

Update 2: updated jsfiddle

Example https://jsfiddle.net/L8a9zazh/15/

HTML

<br><br>
<p>Hello world I'm buzz 😠</p>
<br><br>

<p id="wrong-test">Hello world I'm buzz <span class="emoji">😠</span></p>

CSS

img.emojione {
  // Override any img styles to ensure Emojis are displayed inline
  margin: 0px !important;
  display: inline !important;

  height: auto;
  width: 50px;
}

p#wrong-test {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  display: inline-block;
}

span.emoji {
  font-size: 30px;
  vertical-align: middle;
  line-height: 2;
}

Answer 2

What it sounds like you want would be expressed by the following: vertically centered at a point half the x height of the font above the baseline. For that you need to address line-height.

Your text and inline images will never align vertically if the image size exceeds the line-height of the font. You need to make the line-height of the font to be at least equal to the image height.

Experiment with different line-heights and see where the images line up. If you get a good fit, you're done. If you still can't find get there, get yourself close and then give the image a pixel or two of margin or padding top or bottom where appropriate.