无法显示字体真棒图标？

Posted 2023-02-22

【中文标题】无法显示字体真棒图标？

【英文标题】：cant display Font awesome icons?

【发布时间】：2014-03-07 05:00:59

【问题描述】：

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

这是它在我的页面中的显示方式：

在刚刚签入的 Firebug 中，它在 css 面板中的显示如下：

请指导我如何解决它。

感谢您的帮助和指导

【问题讨论】：

你需要包含整个目录，或者最好的方法是引用外部css，它在fontawesome的服务器上。

@Zafar 您的意思是包含所有目录并仅引用 css 文件吗？请问还需要其他配置吗？

是的。包括所有目录，并且仅引用font-awesome.css。没有其他设置。

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

您可以开始生产了。忘记less和scss。它们是 font-awesome.css 的原料。只要它们已经编译成 .css，你就不再需要它们了（除非你对 fontawesome 进行了一些更改）。

【参考方案1】：

您需要有 fonts 目录可用并且可以在您的网络服务器中访问。包含在http://fortawesome.github.io/Font-Awesome/的下载包中

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

希望这会有所帮助。

【讨论】：

谢谢，请指导less和scss是什么？我是否需要排除或包含生产环境中的任何文件？

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

@rasyadi，你能修复那个链接吗？好像是404ing。我们希望确保我们发布的答案对未来有用。谢谢！

已修复。我为错误的 URL 道歉，我错过了相对路径。

【参考方案2】：

另外，我注意到我需要参考“font-awesome.css”中的文件夹位置，如果您创建了一个目录来保存所有字体真棒文件，那么在哪里可以找到该目录。您可以检查它以确保它位于正确的位置，并确保您在 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; 

     

【参考方案3】：

任何仍在寻找替代答案的人，在另一个 *** answer 上建议的这种方法可以解决问题。

基本上将 .eot、.ttf 和 .woff 文件的构建操作更改为“内容”，而不是默认值“无”。这样做解决了我的问题。