jquery-mobile - Font Awesome 图标与 jQuery UI 图标冲突

Question

当我将 jqm-icon-pack-2.1.2-fa.css 添加到我的网站时，jQuery UI 字体不显示。如果我删除引用，它们会显示。我正在使用 Visual Studio 2012 创建一个 MVC4 移动应用程序。这是我引用 css 文件的方式:

<link rel="stylesheet" href="@Url.StaticStylesheet("jquery.mobile-1.2.0.css")" type="text/css">
<link rel="stylesheet" href="@Url.StaticStylesheet("jquery.mobile.structure-1.2.0.css")" type="text/css">
<link rel="stylesheet" href="@Url.StaticStylesheet("jquery.mobile.theme-1.2.0.css")" type="text/css"> 
<link rel="stylesheet" href="@Url.StaticStylesheet("jqm-icon-pack-2.1.2-fa.css")" type="text/css">

如果我删除最后一个引用，jQuery 图标会起作用，但 Font Awesome 图标不起作用。我试图重新排序引用文献，但没有奏效。我已经用 Firebug 检查了页面，但我看不出有什么不同。我也确保路径是正确的。我想发布一个指向我的网站的链接，但它在外联网中，因此无法访问。我能提供的最好的是我将输入设置为 type="search"并且搜索图标和明文图标不会出现。任何帮助将不胜感激!!

回答:我解决了这个问题，希望可以像我一样为其他人节省一些悲伤和在键盘上敲打头的时间!当您使用 NuGet 包管理器获取 jQuery mobile 时，它​​会添加一些名为 icons-18-black.png、icons-18-white.png、icons-36-black.png 和 icons-36-white.png 的图像文件。如果您不小心，您可能会错过这样一个事实，即 github 网站上有一些稍微不同的图像文件，您需要将其包含在 Font Awesome 中，称为 icons-18-black-pack.png、icons-18-white-pack.png 、icons-36-black-pack.png 和 icons-36-white-pack.png。请注意，这些文件的名称中包含“pack”一词，它们与 jQuery mobile 中包含的原始文件略有不同。只要确保您添加了丢失的文件以及 ajax-loader.png 文件，该文件与 jQuery mobile 中包含的 ajax-loader.gif 文件不同，并且所有文件都应该可以工作。

Answer 1

我解决了这个问题，希望可以像我一样为其他人节省一些悲伤和在键盘上敲打头的时间!当您使用 NuGet 包管理器获取 jQuery mobile 时，它​​会添加一些名为 icons-18-black.png、icons-18-white.png、icons-36-black.png 和 icons-36-white.png 的图像文件。如果您不小心，您可能会错过一个事实，即 github 网站上有一些稍微不同的图像文件，您需要将其包含在 Font Awesome 中，称为 icons-18-black-pack.png、icons-18-white-pack.png 、icons-36-black-pack.png 和 icons-36-white-pack.png。请注意，这些文件的名称中包含“pack”一词，它们与 jQuery mobile 中包含的原始文件略有不同。只要确保您添加了丢失的文件以及 ajax-loader.png 文件，该文件与 jQuery mobile 中包含的 ajax-loader.gif 文件不同，并且所有文件都应该可以工作。