html - 为什么 font awesome unicode 图标在 select2 输入占位符中在移动设备上显示困惑?

标签 html css unicode font-awesome

我正在尝试将占位符图标插入到 select2 输入字段中。

在桌面上查看:

enter image description here

在手机上查看:

enter image description here

这是我用来使用 unicode 集成 font awesome 的代码,用于将图标放置在输入字段中。

jade(我在其中初始化 select2 的元素)

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

和CSS

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

奇怪的是,当我点击输入字段,输入然后清除输入,然后点击外部时,标签图标正确显示。但它在加载时显示不正确。

最佳答案

Font Awesome 和其他图标网站经常在各种不同平台上存在兼容性问题。如果出现 unicode,您应该有备用选项 - 例如 sprite。

移动浏览器编码通常与网页版浏览器不同。

有很多方法可以处理这个问题,这篇文章是一个很好的起点: http://www.creativebloq.com/app-design/icon-fonts-in-apps-21410734

关于html - 为什么 font awesome unicode 图标在 select2 输入占位符中在移动设备上显示困惑?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24566019/

相关文章:

html - 在每个打印页面上重复 HTML 表格页脚

html - Paypal Checkout 窗口在 WKWebView(iOS) 中立即关闭

html - css 下拉菜单不起作用

html - 固定菜单 -> 媒体屏幕 css 不工作

python - 在 Boost Python 中使用带有 std::wstring 的 C++ 函数的 Unicode

html - 在 Bootstrap 4 flexbox 中创建等高的 div

c# - 使 Javascript 代码在 Page Start 上运行

javascript - 我应该捆绑哪些 js/css 文件?

json - 为什么 JSON.parse 会因 Node.js 中的编码字符而阻塞?

javascript - 为什么 Unicode 组合字符顺序在 IDEA 和 Chrome 之间不同?