Почему значок font awesome в Юникоде отображается неправильно на мобильном устройстве в заполнителе ввода select2?

#html #css #unicode #font-awesome

#HTML #css #Юникод #шрифт-awesome

Вопрос:

Я пытаюсь вставить значок заполнителя в поле ввода select2.

Просмотр на рабочем столе:

введите описание изображения здесь

Просмотр на мобильном устройстве:

введите описание изображения здесь

Вот код, который я использую для интеграции шрифта awesome в Юникод, чтобы поместить значок в поле ввода.

jade (элемент, в котором я инициализирую select2)

 #tags.icon(type="text", name="tags", placeholder= "amp;#xf02c; amp;nbsp; tags...")
  

и CSS

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

Странно то, что когда я щелкаю в поле ввода, набираю, а затем очищаю ввод и щелкаю снаружи, значок тега отображается правильно. Но при загрузке он отображается некорректно.

Комментарии:

1. Привет, я сейчас сталкиваюсь с вашей проблемой, есть окончательное решение?

Ответ №1:

У Font Awesome и других сайтов с иконками часто возникают проблемы с совместимостью на разных платформах. У вас должны быть параметры резервного копирования, если появляется юникод — например, спрайт.

Часто кодировка мобильного браузера отличается от веб-версии браузера.

Есть много способов справиться с этим, и эта статья — хорошее место для начала:http://www.creativebloq.com/app-design/icon-fonts-in-apps-21410734

Ответ №2:

Без отладки я бы сказал, что у вас проблема с z-индексом или фактическая ошибка рендеринга движка. Попробуйте установить значение позже, если сможете. Если вы знаете, что текст-заполнитель создается добавлением элемента dom, попробуйте увеличить его z-индекс. Удачи.