羽毛图标在bootstrap模式中不起作用
- 版本:
- ” .NET
我目前正在尝试构建ASP.NET Web应用程序。羽毛图标在普通页面上工作正常,但并未显示何时包含在模态中。
<link rel="stylesheet" href="~/lib/layout/feather-icon.css" />
<div class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<div class="modal-body">
<i data-feather="pause-circle" class="align-middle"></i>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-12">
<button type="button" class="btn btn-primary m-1" data-dismiss="modal" aria-label="Close">Close</button>
</div>
</div>
</div>
</div>
</div>
@section Scripts{
<script type="text/javascript" src="~/lib/feather-icons/feather.js"></script>
<script type="text/javascript" src="~/lib/feather-icons/feather.min.js"></script>
<script>
feather.replace();
</script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
</script>
<script type="text/javascript" src="~/js/common/chatting.js"></script>
}
正如您从Web浏览器DevTools的下图中可以看到的那样,该标签未用SVG
屏幕截图
替换
有人知道为什么它找不到模式中的数据羽毛元素?如果有工作?
- Version: [email protected], Bootstrap v4.3.1
- using C# RazorPage, asp.net
I am currently trying to build an asp.net web app. The feather icons work fine on normal pages, but it doesn't show when it is included in a Modal.
<link rel="stylesheet" href="~/lib/layout/feather-icon.css" />
<div class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<div class="modal-body">
<i data-feather="pause-circle" class="align-middle"></i>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-12">
<button type="button" class="btn btn-primary m-1" data-dismiss="modal" aria-label="Close">Close</button>
</div>
</div>
</div>
</div>
</div>
@section Scripts{
<script type="text/javascript" src="~/lib/feather-icons/feather.js"></script>
<script type="text/javascript" src="~/lib/feather-icons/feather.min.js"></script>
<script>
feather.replace();
</script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
</script>
<script type="text/javascript" src="~/js/common/chatting.js"></script>
}
As you can see from the below image from web browser devtools, the tag is not replaced with svg
Screenshot
anyone know of why it cannot find the data-feather elements in the modal? And if there is a work around?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)