为什么font-awesome在localhost上运行，但不在web上运行？

我在我的项目(mvc/asp.net)中使用字体真棒。我的问题是，我正在调试该项目，并检查localhost，字体真棒图标没有问题。但是，当发布网站，并在网上查询，而不是图标，我看到了小盒子。我确定它被放置在正确的目录中（其中放置了css文件）。为什么font-awesome在localhost上运行，但不在web上运行？

我找不到任何合适的解决方案。

顺便说一句，按钮也没有问题。他们都可以，但图标不见了。

感谢

来源

2013-02-15 ethelrsn

您可以显示链接到网站？或检查源路径。你有没有将图标复制到发布文件夹？ – Kaf 2013-02-15 12:48:28

您是否在本地使用图标，如果有，是否将它们复制到发布文件夹？在给定的链接上缺少哪些图标。我看不到任何丢失的盒子。 – Kaf 2013-02-15 13:47:00

在页脚部分，靠近社交媒体和其他信息，我使用了令人敬畏的字体图标。据我所知，它不需要包含图标文件与字体awesome.It生成图标本身。例如：生成facebook图标等。 – ethelrsn 2013-02-15 14:25:10

我只是加载网页并检查萤火虫的净标签。

您的以下网址返回404：

http://www.senocakonline.com/Content/font/fontawesome-webfont.woff

http://www.senocakonline.com/Content/font/fontawesome-webfont.ttf

我会认为这些是缺少的是你的图标不显示的原因。

更新：2015年10月23日使其可眼前这个代码添加到您的WebConfig：

<system.webServer> 
    <staticContent> 
     <mimeMap fileExtension="woff" mimeType="application/font-woff" /> 
     <mimeMap fileExtension="woff2" mimeType="application/font-woff" /> 
    </staticContent> 
</system.webServer>

来源

2013-02-16 10:55:45 AdamWhite

非常感谢你，这正是我错过了.. – ethelrsn 2013-02-17 09:51:23

谢谢！它与mimemap;） – dnx 2015-11-12 17:17:33

我有相同的问题，以访问字体真棒字体，**其他解决方案**尝试这些链接处理'StyleBundle' **虚拟路径**：[链接1]（http：// （链接2）（http://forums.asp.net/t/1774324.aspx?MVC4+css+bundling+和图片+参考），[链接3]（http://ericpanorel.net/2013/10/25/font-awesome-4-0-mvc-bundling-and-minification/），[链接4]（http ：//jameschambers.com/2014/08/adding-some-font-awesome-to-mvc-and-bootstrap/），希望这有助于某人。 – stom 2016-02-25 09:36:19

我有同样的问题。解决办法：

打开CSS文件并删除当前字体面部分，并换成：

@font-face { 

    font-family: FontAwesome; 
    src: url('/Content/fonts/fontawesome-webfont.eot'), /*for IE */ 
     url('/Content/fonts/fontawesomewebfont.svg'), 
     url('/Content/fonts/fontawesome-webfont.ttf'); /* for CSS3 browsers */ 
    font-weight: normal; 
    font-style: normal; 
}

（只要你想改变字体，面值）

将您的ttf字体文件复制到桌面上然后转换为eot

http://www.kirsle.net/wizards/ttf2eot.cgi
转换TTF字体文件到SVG

http://www.freefontconverter.com/
转换TTF字体文件WOFF（可选）

http://ttf2woff.com/
拖放这些所有字体（TTF，EOT，SVG， woff ...）到Visual Studio 2012打开时的文件位置。
发布项目

来源

2013-04-20 14:47:26

是的，这与将文件放在正确的文件夹中有关。 – arame3333 2017-08-16 13:08:34

为什么字体真棒作品在调试模式而不是IIS上？

在Visual Studio中，默认情况下，某些字体文件不会包括在发布：

.eot
以.json
的.ttf
.woff

这是因为他们的构建动作设置为无，这是默认情况下（在MVC上，不确定在WebForms上）。您必须转到受影响的文件属性并将其从“无”设置为“内容”。

enter image description here

这是我如何解决它（而不是由手动拖动因为有些人可能认为文件）

学分转到这个家伙：http://edsykes.blogspot.com/2012/09/aspnet-build-actions-with-ttf-eot-and.html

来源

2013-12-23 07:18:18 Yorro

很高兴能够帮到:) – 2014-06-16 10:59:11

这些文件默认设置为“内容”，但很高兴它帮助了其他人。这也不是字体真棒具体，而是对文件扩展名 – usefulBee 2015-08-13 20:59:33

我尝试了一切，并且很高兴地惊讶这是正确的答案。谢谢，从来没有想过这是一个需要注意的问题。再次感谢。 – flavour404 2016-02-09 00:22:11

在我的ASP.NET MVC项目，在BundleConfig.cs中启用的捆绑工作是：

打开文件font-awesome.css并将@font-face更改为：

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

我必须在每个url之前加上../。

来源

2014-01-23 14:39:59

匿名用户[建议]（http://stackoverflow.com/review/suggested-edits/5269701）在另一个文件（如custom.css）中执行样式覆盖，而不是编辑原始字体 - awesome.css源码。 – 2014-07-10 17:50:56

另一种解决方案，解决了这个问题，我可以在这里找到：https://stackoverflow.com/a/12587256/615285

竞标从那里：

问题是最有可能的是，在CSS文件的图标/图像是使用相对路径，所以如果你的软件包与你的unbundled css文件不在相同的应用程序相对路径中，它们就会变成断开的链接。

的easist要做的是让你的包路径样子的CSS目录，以便在相对URL只是工作，即：

new StyleBundle("~/Static/Css/bootstrap/bundle")

我们在1.1beta1版本中添加支持这一点，所以自动重写图片网址，您可以添加一个新的ItemTransform，它可以自动完成这个重新绑定。

bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
      "~/Static/Css/bootstrap/bootstrap.css", 
      "~/Static/Css/bootstrap/bootstrap-padding-top.css", 
      "~/Static/Css/bootstrap/bootstrap-responsive.css", 
      "~/Static/Css/bootstrap/docs.css", new CssRewriteUrlTransform()));

来源

2015-03-29 19:05:53 Mason240

我有同样的问题。字体显示在本地正确，但是当我将它升级到服务器时，只显示空白方块。
有时可能会发生这种情况，因为FontAwesome CSS文件src属性中提到的文件名与实际字体文件名不同。在我的情况，我发现像这样在fontawesome css文件：

 
    @font-face { 
      font-family: 'FontAwesome'; 
      src: url('../font/fontawesome-webfont.eot?v=3.2.1'); 
      src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), 
       url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), 
       url('../font/fontawesome-webfont_aea8981c.ttf?v=3.2.1') format('truetype'), 
       url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg'); 
      font-weight: normal; 
      font-style: normal; 
     }

但实际的字体文件名wese喜欢these-

 
     font/fontawesome-webfont_2d2816fe.eot 
     font/fontawesome-webfont_aea8981c.eot 
     font/fontawesome-webfont_aea8981c.ttf 
     font/fontawesome-webfont_aea8981c.woff

虽然名字没有在CSS正确地匹配下划线后的文件，它在本地工作正常。所以很难说这可能是什么原因。
当我将FontAwesome css文件src中的文件名称编辑为确切的实际名称时，它工作正常。

来源

2015-09-17 09:45:12

这也是在IIS中的MIME类型的问题，只需添加文件扩展名.woff，也将努力

来源

2015-09-22 16:57:46 Bachask8

这取决于该行代码中BundleConfig：

 BundleTable.EnableOptimizations = true;

如果是真的，你必须改变你的字体文件的路径;

../显示为root path, main folder of your project。然后你必须写下其余的路径。

矿。如果这是真的：

font-family: 'Icons'; 
    src:url('../_include/css/fonts/Icons.eot'); 
    src:url('../_include/css/fonts/Icons.eot?#iefix') format('embedded-opentype'), 
     url('../_include/css/fonts/Icons.woff') format('woff'), 
     url('../_include/css/fonts/Icons.ttf') format('truetype'), 
     url('../_include/css/fonts/Icons.svg#Icons') format('svg'); 
    font-weight: normal; 
    font-style: normal;

当它是假的：

font-family: 'Icons'; 
    src:url('fonts/Icons.eot'); 
    src:url('fonts/Icons.eot?#iefix') format('embedded-opentype'), 
     url('fonts/Icons.woff') format('woff'), 
     url('fonts/Icons.ttf') format('truetype'), 
     url('fonts/Icons.svg#Icons') format('svg'); 
    font-weight: normal; 
    font-style: normal;

来源

2016-02-18 13:25:51 Ebleme

为什么font-awesome在localhost上运行，但不在web上运行？

回答

相关问题