asp.net-core - ASP.NET CORE MVC 项目中未显示字体真棒图标
问题描述
我正在开发一个 ASP.NET CORE MVC 应用程序,但在加载字体真棒图标时遇到问题。以下是文件夹布局:
这是我的 _layout.cshtml 的样子:
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
<link rel="stylesheet" href="~/lib/font-awesome/css/fontawesome.css" />
</environment>
<environment exclude="Development">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o">
</script>
<link rel="stylesheet" href="~/lib/font-awesome/css/fontawesome.min.css" />
</environment>
<script src="~/js/site.js" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)
这是我尝试使用 fontawesome 图标的方式:
<span class='input-group date datepicker'>
@Html.TextBoxFor(m => m.CandidateDetail.DateOfBirth, new { @id = "DateOfBirth", @class = "form-control" })
<span class="input-group-append">
<span class="input-group-text"><i class="fas fa-calendar"></i></span>
</span>
</span>
当我启动该项目时,我看到的只是一个正方形。我在这里做错什么了吗?
解决方案
对于引用font-awesome
,您应该添加~/lib/font-awesome/css/all.css
而不是~/lib/font-awesome/css/fontawesome.css
.
在下面添加代码<environment include="Development">
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link href="~/lib/font-awesome/css/all.css" rel="stylesheet" />
</environment>
推荐阅读
- wpf - Checkbox Command/IsChecked 执行顺序
- angular - Angular apollo - 执行查询突变更新后 UI 不更新
- c# - 枚举数据类型转换为字符串
- python - 如何从 unix 时间中获取正确的日期时间值?
- java - 使用多个命名空间解析 Youtube XML 响应
- ruby-on-rails - 仅当用户是当前用户的联系人时才显示用户的个人资料
- vue.js - 如何在 v-model 和 vue.js 中使用多维 json 中的动态键?
- excel - 将数组写入工作表并重复 n 次
- android-studio - 使用蓝牙耳机麦克风录音
- javascript - 获取 /index.html