羽毛图标在 Bootstrap Modal 中不起作用

Question

• 版本：[电子邮件受保护]，Bootstrap v4.3.1
• 使用 C# RazorPage、asp.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>
}

正如您从网络浏览器开发工具的下图中看到的，标签没有被 svg 替换

截图

有人知道为什么它在模态中找不到 data-feather 元素吗？如果有解决办法吗？

Answer 1

$('.modal ').on('shown.bs.modal', function () {
    // Call feather.replace() after the modal is shown
    feather.replace();
});