css - 在 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()));

我检查了网站上的几个话题，但似乎没有一个能解决这个问题。一如既往，我很感激任何有关这方面的帮助。

迈克

Answer 1

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

来自:

    @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;
}

如果可行，请告诉我。