字体神器图标与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 Package Manager获取jQuery mobile时，它会添加一些图像文件，如icons-18-black.png、icons-18-white.png、icons-36-black.png和icons-36-white.png。如果您不小心错过了在github网站上需要包含的一些略微不同的图像文件，名为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文件不同），所有东西都应该正常工作。

- Darrell

---

您应该编辑掉您的问题答案，并将其发布为实际的答案，然后将其标记为已接受。这样，当人们查看您列出的问题时，他们可以看到有一个可行的解决方案。 - Jack

抱歉，我必须等待一段时间才能发布自己的问题答案。不确定为什么会这样，但无论如何，我已经发布了答案。谢谢！ - Darrell

Answer 1

我解决了这个问题，希望能够帮助其他人节省一些时间和精力，避免像我一样在键盘上苦思冥想数小时！当您使用NuGet软件包管理器获取jQuery mobile时，它会添加一些名为icons-18-black.png、icons-18-white.png、icons-36-black.png和icons-36-white.png的图像文件。如果您不小心，可能会错过在Github网站上需要与Font Awesome一起包含的一些略有不同的图像文件，它们的名称中包含“pack”，分别是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文件不同），所有内容都应该可以正常工作。

- Darrell