bootstrap fontawesome 图标无法正常工作答案

【问题标题】：bootstrap fontawesome icon is not working properlybootstrap fontawesome 图标无法正常工作
【发布时间】：2017-08-29 18:39:15
【问题描述】：

当我使用 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

当我使用字形图标时它可以工作。

<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

【问题讨论】：

请先看类似的问题。

标签： asp.net-mvc twitter-bootstrap font-awesome glyphicons

【解决方案1】：

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

看起来您的字体很棒的 css 没有被正确引用。此外，看起来您正在通过 razor 和 bootstrap 使用 HTML Helpers。

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 链接放在您的 <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 链接，请确保您没有在项目中同时引用 font-awesome.css 文件。检查 Bundle.config 并确保删除引用。

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

【讨论】：

【解决方案2】：

我给出了 fontawesome-all.min.css 的参考而不是 fontawesome.min.css 并且它起作用了。

【讨论】：