在 MVC 5 网站上使用 font-awesome 时没有图像

Question

将 font-awesome 添加到样式包时，图像无法正确显示。我得到的不是正确的图标，而是一个透明框。我的样式包设置如下：

 bundles.Add(new StyleBundle("~/Content/css").Include(
              //site bundles
 ).Include("~/Content/font-awesome/css/font-awesome.css", new CssRewriteUrlTransform()));

我检查了网站上的几个主题，但 none 似乎可以解决这个问题。一如既往，我很感激任何关于此的帮助。

麦克

Answer 1

假设在 Content 文件夹中有一个名为 fonts 的文件夹，其中包含超棒的字体文件，问题可能归结为字体文件的文件路径（ WOFF、WOFF2、SVG、EOT 等）字体超赞 css 文件中的引用。 @font-face 规则的 "src" 属性可能使用了相对的 url，例如“../fonts/blah.woff”。尝试使用删除“..”并将 url 作为“/fonts/blah.woff”与 css.

发件人：

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

收件人：

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

如果可行，请告诉我。

在 MVC 5 网站上使用 font-awesome 时没有图像

No Images when using font-awesome with MVC 5 website

css

twitter-bootstrap

asp.net-mvc-5

font-awesome