Why is font awesome unicode icon showing up messed up on mobile in select2 input placeholder?

Question

I am trying to insert a placeholder icon into a select2 input field.

View on desktop:

View on mobile:

Here is the code I use to integrate font awesome using unicode, to place the icon in a input field.

jade (element in which I initialize the select2 on)

#tags.icon(type="text", name="tags", placeholder= "   tags...")

and CSS

.select2-input, #searchPosts
  font-family 'FontAwesome'

The weird thing is, when I click into the input field, type and then clear the typing, and click outside, the tag icon shows correctly. But it does not show correctly on load.

Answer 1

Font Awesome and other icon sites often have compatibility issues across various different platforms. You should have back up options if unicode appears - such as a sprite.

Often mobile browser encoding is different to web version of the browser.

There are many ways to handle this and this article is a good place to start: http://www.creativebloq.com/app-design/icon-fonts-in-apps-21410734

Answer 2

Without debugging it I'd say you're experiencing a z-index issue or an actual engine rendering mistake. Try setting the value later if you can. If you know the placeholder text is achieved through a dom element addition, try increasing its z-index. Good Luck.