无法显示Font awesome图标？

Question

我刚开始在我的MVC应用程序中使用Font Awesome，该应用程序已经有了Bootstrap。我需要使用一些图标，我已将font-awesome.css复制到我的项目中，但图标不可见。我只包含了这个css文件，不确定是否还有其他文件需要包含吗？

以下是它在我的页面上的显示方式： 我刚刚在Firebug中检查了它，在css面板中显示如下： 请指导我如何解决它。

感谢您的帮助和指导。

- Toubi

---

你需要包含整个目录，或者最好的方式是引用外部CSS，该CSS位于FontAwesome的服务器上。 - Zafar

是的，请包括所有目录，并仅引用“font-awesome.css”。不要进行其他设置。 - Zafar

@Zafar，谢谢。请问一个问题。这些文件和文件夹都是必须的吗？它有4个文件夹css, fonts, less, scss，但我只会使用一些图标。是否可以删除任何额外内容以提高性能？请指教。 - Toubi

只要保留css和fonts文件夹，您可以删除less和scss。 - Zafar

只要你已经准备好进入生产环境，就可以忘记Less和SCSS了。它们是font-awesome.css的组成部分。只要它们已经编译成.css文件，你就不再需要它们了（除非你对FontAwesome进行了一些更改）。 - Zafar

Answer 1

您需要拥有可供访问的字体目录，并且可以在您的Web服务器上进行访问。它包含在http://fortawesome.github.io/Font-Awesome/下载包中。

在font-awesome.css文件中，它需要引用字体目录才能显示图标图像。

希望这可以帮助到您。

- rasyadi

---

谢谢，请指导一下 less 和 scss 是什么？在生产环境中，我需要特别排除或包含哪些文件吗？ - Toubi

如果您只使用CSS，则不需要Less和Scss目录。这些目录是为那些想要使用Less和Sass的人准备的，它们分别是CSS预处理器和CSS扩展。 - rasyadi

@rasyadi，你能修复那个链接吗？它似乎出现了404错误。我们希望确保我们发布的答案在未来是有用的。谢谢！ - imjared

已修复。对于错误的URL，我很抱歉，我错过了相对路径。 - rasyadi

Answer 2

此外，我注意到需要在 "font-awesome.css" 中引用文件夹位置，以查找包含所有 font-awesome 文件的目录（如果您创建了一个）。您可以检查一下，确保它正在正确的位置查找，并确保在 App_Start 和 Shared/_Layout.cshtml 中有'bundles'引用。

    @font-face {
      font-family: 'FontAwesome';`enter code here`
      src: url('../Content/fonts/fontawesome-webfont.eot?v=4.2.0');
      src: url('../Content/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../Content/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../Content/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../Content/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
      font-weight: normal;
      font-style: normal; 

     }

- Sean

Answer 3

如果有人仍在寻找替代答案，其他StackOverflow answer上建议的方法可以解决此问题。

基本上将.eot、.ttf和.woff文件的构建操作更改为“内容”（而不是默认值“无”），即可解决此问题。

- Umair