羽毛图标在bootstrap模式中不起作用

发布于 01-23 10:46 字数 1886 浏览 3 评论 0原文

  • 版本:
  • ” .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">&times;</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

屏幕截图
替换 “

有人知道为什么它找不到模式中的数据羽毛元素?如果有工作?

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
image description

anyone know of why it cannot find the data-feather elements in the modal? And if there is a work around?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

三岁铭2025-01-30 10:46:02
$('.modal ').on('shown.bs.modal', function () {
    // Call feather.replace() after the modal is shown
    feather.replace();
});
$('.modal ').on('shown.bs.modal', function () {
    // Call feather.replace() after the modal is shown
    feather.replace();
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文