logo标签列表

无法在Razor中使用FontAwesome图标

razorfont-awesome
3
这是我在ASP.NET MVC 5项目中第一次尝试使用FontAwesome。参考了各种文章，我做了以下事情：
  1. 使用Nuget Manager下载了FontAwesome包。
  2. 在RegisterBundles()方法中添加了以下代码：

bundles.Add(new StyleBundle("~/Content/fontawesome").Include( "~/Content/font-awesome.min.css"));

  1. 在_Layout.cshtml中添加了使用这个bundle的逻辑：

@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @Scripts.Render("~/Content/fontawesome") // 添加了这一行 @RenderSection("scripts", required: false)

这是我的简单Test.cshtml：

<h2>Test</h2>
<i class="fa fa-star"></i>

当在浏览器中显示时，“Test.”后面什么也没看到。本来期望看到一个星星。
以下是浏览器中的页面源代码片段：
<div class="container body-content">
  <h2>Test</h2>
  <i class="fa fa-star"></i>
</div>

<script src="/bundles/jquery?v=8z6YzzH0c3lAT2R_qe2hLO3ZyowcuHmPA5RUiWrC6gU1"></script>
<script src="/bundles/bootstrap?v=H2j5HUSj46jlSq1Se76I-uTAYq6y_MryNeOkhmo3adE1"></script>
<script src="/Content/fontawesome?v="></script>

我想知道在使用字体方面是否有遗漏的步骤。谢谢。

2个回答
3
你需要使用@Styles.Render而不是@Scripts.Render来处理CSS捆绑。
1

正如Varun所提到的，您捆绑的任何样式都需要输出。

@Styles.Render

而不是
@Scripts.Render

请注意，在使用任何fontawesome图标的实例之前，最好在中输出您的样式：
<html>
<head>
@Styles.Render("~/Content/fontawesome")
</head>

<body>
<div class="container body-content">
  <h2>Test</h2>
  <i class="fa fa-star"></i>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

</body>
</html>
谢谢你的帮助。我已经修复了，但它仍然无法工作。然而，如果我将其替换为<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">，它就可以工作了。 - Peter
也许你的脚本捆绑正在被优化，导致出现问题。看看你的代码，你包含了压缩版本。我曾经看到过某些压缩文件导致脚本捆绑失败。如果是这种情况，那么尝试将未压缩的版本添加到捆绑中，或者为了测试，如果存在以下行，请尝试从Bundleconfig.cs中删除：BundleTable.EnableOptimizations = true; - SkyBlues87
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接