为什么font-awesome在localhost上工作,但不在web上?

我在我的项目(mvc/asp.net)使用字体真棒。 我的问题是,我正在debugging项目,并检查localhost ,没有问题的字体真棒图标。 但是,当发布网站,并在网上查询,而不是图标,我看到小盒子。 我相信它被放置在正确的目录(放置的css文件)。

我找不到任何适当的解决scheme。

顺便也没有button的问题。 他们都好,但图标已经消失。

谢谢

我刚刚加载你的网页,并检查了萤火虫的净选项卡。

您的以下url返回404:

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

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

我会假设那些失踪是你的图标不显示的原因。

更新:23.10.2015,使其可用只需将此代码添加到您的WebConfig:

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

为什么font-awesome在debugging模式下工作,但不在IIS上?

在Visual Studio中,默认情况下,某些字体文件在发布期间不包含:

  • .eot
  • 以.json
  • .TTF
  • .woff

这是因为他们的构build操作被设置为None ,这是默认情况下(在MVC上,不确定在WebForms上)。 您必须转到受影响的文件属性,并将其从“无”设置为“内容”。

在这里输入图像说明

这是我如何解决它(而不是像某些人所build议的那样手动拖动文件)

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

我有同样的问题。 解决scheme:

  1. 打开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; } 

    (根据需要更改字体值)

  2. 在你的桌面上复制你的ttf字体文件然后转换为eot

    http://www.kirsle.net/wizards/ttf2eot.cgi

  3. 将ttf字体文件转换为svg

    http://www.freefontconverter.com/

  4. 将ttf字体文件转换为woff(可选)

    http://ttf2woff.com/

  5. 将Visual Studio 2012打开时,将所有字体(ttf,eot,svg,woff …)拖放到文件位置。

  6. 发布你的项目

解决这个问题的另一个解决scheme可以在这里find: https : //stackoverflow.com/a/12587256/615285

从那里引用:

问题很可能是CSS文件中的图标/图像正在使用相对path,所以如果你的包与你的unbundled css文件不在相同的应用程序相对path中,它们将变成断开的链接。

最简单的事情就是让你的bundlepath看起来像css目录,所以相对的url只是工作,即:

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

我们已经在1.1beta1版本中添加了对此的支持,所以为了自动重写图片url,可以添加一个新的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())); 

这取决于BundleConfig这个代码行:

  BundleTable.EnableOptimizations = true; 

如果这是真的,你必须改变你的字体文件的path;

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

矿。 当这是真的:

 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; 

这也是IIS中的MIME TYPE问题,只需添加文件扩展名.woff即可

在我的BundleConfig.cs中启用绑定的ASP.NET MVC项目中,工作是这样的:

打开文件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之前添加../

我有同样的问题。 字体显示在本地正确,但是当我把它升级到服务器,只显示空白方块。
有时可能会发生这种情况,因为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')格式('embedded-opentype'),
                 url('../ font / fontawesome-webfont.woff?v = 3.2.1')格式('woff'),
                 url('../ font / fontawesome-webfont_aea8981c.ttf?v = 3.2.1')格式('truetype'),
                 url('../ font / fontawesome-webfont.svg#fontawesomeregular?v = 3.2.1')format('svg');
             font-weight:正常;
             font-style:normal;
         }
        

但是实际的字体文件名称就像这些 –

        字体/ fontawesome-webfont_2d2816fe.eot
        字体/ fontawesome-webfont_aea8981c.eot
        字体/ fontawesome-webfont_aea8981c.ttf
        字体/ fontawesome-webfont_aea8981c.woff
        

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