来自 Nuget 包的 Font Awesome 和来自 BundleConfig.cs 的参考

Posted

技术标签:

【中文标题】来自 Nuget 包的 Font Awesome 和来自 BundleConfig.cs 的参考【英文标题】:Font Awesome from Nuget package and reference from BundleConfig.cs 【发布时间】:2019-09-02 10:00:32 【问题描述】:

我在 VS2015 v4.7.0 中从 NuGet 管理器控制台安装了 FontAwesome。这将两个文件(font-awesome.css/font-awesome.min.css)放在 ~/Content 文件夹和 ~/fonts 下的 fonts 文件夹中。当我打开 font-awesome.css 时,这看起来是正确的。

@font-face 
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') 
  format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2? 
  v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff? 
  v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf? 
  v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg? 
  v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;

我验证了参考路径是正确的

我在 BundleConfig.cs 中包含了这行代码,以便在项目中引用这个库

bundles.Add(new StyleBundle("~/Content/css").Include(                    
                      "~/Content/bootstrap.css",
                      "~/Content/bootstrap-datepicker.css",
                      "~/Content/StickyFooter.css",
                      "~/Content/font-awesome.css"
                      ));

在 _Layout.cshtml 页面中像这样引用捆绑文件。

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>

这行代码只显示方框。

<span class="input-group-prepend"><i class="fas fa-angle-double-down"></i></span> 

Or 
<span class="input-group-prepend"><i class="fa-angle-double-down"></i></span> 

请建议我缺少什么。

【问题讨论】:

请发布您的BundleConfig.cs 的相关部分(包括字体 Awesome css 的整个捆绑包)。也请张贴您在页面上包含此捆绑包的位置。还要确保你已经清除了浏览器缓存 我更新了原始帖子以包含您询问的详细信息。我也以另一种方式引用了这个类。请告诉我 【参考方案1】:

您需要使用的类是 fa fa-angle-double-down,而不是您列出的 2 次尝试:fas fa-angle-double-downfa-angle-double-down

<span class="input-group-prepend"><i class="fa fa-angle-double-down"></i></span> 

请注意,fa 前缀在版本 5 中已被弃用,取而代之的是 fasfalfarfab,我确信这就是您正在查看的文档中提到 @ 的原因987654332@。但是,Nuget 上最新版本的 FontAwesome 是 v4.7,因此您应该使用较旧的 fa 前缀。

您可以找到 FontAwesome 4.7 文档和图标列表here

【讨论】:

成功了,谢谢 :) 我们应该传递什么?我查看了这个 url fontawesome.com/icons/angle-double-down?style=solid 和本地 font-awesome.css 文件本身来查找类名,我的变体也是如此。 @Cindy 检查我编辑的答案。我包含了一个指向 v4.7 文档的链接,该链接将反映您需要的类名

以上是关于来自 Nuget 包的 Font Awesome 和来自 BundleConfig.cs 的参考的主要内容,如果未能解决你的问题,请参考以下文章

用 font-awesome 将小图标堆叠在大图标上

如何使用 Visual Studio 2019 在 ASP.NET Core 2.2 中安装 Font Awesome [关闭]

如何检查我的 C# 应用程序是不是使用来自 nuget 包的正确平台特定 dll?

Xcode Storyboard - 使用 font-awesome 制作文本 rtl

在 CSS 中使用 Font Awesome 图标

将 Solid and Light Font Awesome Pro 添加到 React 站点