为什么图标在模态加载后的几秒钟后出现

Question

我有一个包含大量待处理数据的网页。我想要做的是显示一个包含每个页面加载广告的模式。

<div id="myModal" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button> 
       <h4 class="modal-title"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>Before You Begin.</h4> 
      </div> 
      <div class="modal-body"> 

      </div> 
     </div> 
    </div> 
</div> 

<script> 
$(function(){ 
    $("#myModal").modal('show'); 
}) 
</script> 

在这个模式标题中，我有一个图标和标题。该模式正在正确弹出。但我的问题是，当这种模式打开图标是在模式打开后几秒钟出现。

Answer 1

我想你会已经添加了CDN的图标：

CDN https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css

下载的CSS（最好的方法），或添加链接：在我codepen

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 

工作正常：https://codepen.io/ricopo/pen/vmXwbK