bootstrap fontawesome 图标无法正常工作

Question

当我使用 fa fa-inr 显示卢比图标时

<div class="inner-addon left-addon editor-field">
     <i class="fa fa-inr"></i>
     @Html.TextBoxFor(model => model.Price,new { @class = "form-control"})
     @Html.ValidationMessageFor(model => model.Price)
</div>

无法正常工作for fontawesome icon - rupee

它在我使用 glyphicon 图标时有效。

<div class="inner-addon left-addon editor-field">
     <i class="glyphicon glyphicon-euro"></i>
     @Html.TextBoxFor(model => model.Price,new { @class = "form-control"})
     @Html.ValidationMessageFor(model => model.Price)
</div>

正常工作for glyphicon icon - euro

Answer 1

看到这个post：font-awesome not working bundleconfig in MVC5

看起来你的字体很棒 css 没有被正确引用。此外，看起来您正在通过剃须刀使用 HTML 助手，也许 bootstrap。

ASP.NET MVC 的最佳选择是将其捆绑，因此您可能需要在 Bundle.config 中使用以下格式和 .Include：

 bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/Foo.css",                        
            "~/Content/Bar.css",
            "~/Content/Boo.css",
            "~/Content/Far.css"
        ).Include("~/yourpath/font-awesome.css", new CssRewriteUrlTransform());

也许更新您的 NuGet 包，然后重新检查您的引用是否正确。

如果所有其他方法都失败了，一个简单的解决方法是将此 CDN link 放入您的 <head></head> :

<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">

如果您使用 CDN link，请确保您没有在项目中引用 font-awesome.css 文件。检查 Bundle.config 并确保删除引用。

http://ericpanorel.net/2013/10/25/font-awesome-4-0-mvc-bundling-and-minification/

Answer 2

我参考了 fontawesome-all.min.css 而不是 fontawesome.min.css，它起作用了。

bootstrap fontawesome 图标无法正常工作

bootstrap fontawesome icon is not working properly

asp.net-mvc

twitter-bootstrap

font-awesome

glyphicons