bootstrap fontawesome图标无法正常工作

时间:2017-04-04 13:56:04

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

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

2 个答案:

答案 0 :(得分:0)

请参阅此帖子:font-awesome not working bundleconfig in MVC5

看起来你的font-awesome 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链接放在<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/

答案 1 :(得分:0)

我提供了 fontawesome-all.min.css 而不是fontawesome.min.css的参考,并且有效。