放置在 <ul> 之后的图标不显示答案

【问题标题】：Icon not showing up when placed after <ul>放置在 <ul> 之后的图标不显示
【发布时间】：2018-04-16 03:07:16
【问题描述】：

我正在尝试在导航栏的末尾放置一个图标。当我将它放在我的 ul 标签之前时，它会根据以下代码显示：

<div class="navigation"> 
                 <i class="fa fa-instagram"></i>
                  
                <ul>
                <li class="menu active"><a href="discover.html">Discover</a></li>
                <li class="menu"><a href="fashion.html">Fashion</a></li>
                <li class="menu"><a href="portraits.html">Creative portraits</a></li>
                <li class="menu"><a href="client.html">Client work</a></li>
                <br>
                <br>
                
                <li class="contact"><a href="about.html">About</a></li>
                <li class="contact"><a href="contact.html">Contact</a></li>
                </ul>
            
                <br>
                <br>
               
                 
                </div>

但是，一旦我将图标放在后面，它就不会显示出来，如这段代码所示。

<div class="navigation"> 
                 
                <i class="fa fa-instagram"></i>
            
                <ul>
                <li class="menu active"><a href="discover.html">Discover</a></li>
                <li class="menu"><a href="fashion.html">Fashion</a></li>
                <li class="menu"><a href="portraits.html">Creative portraits</a></li>
                <li class="menu"><a href="client.html">Client work</a></li>
                <br>
                <br>
                
                <li class="contact"><a href="about.html">About</a></li>
                <li class="contact"><a href="contact.html">Contact</a></li>
                </ul>
            
                <br>
                <br>
               <i class="fa fa-instagram"></i>
                 
                </div>

我该怎么做才能让它出现？？

【问题讨论】：

使用 fa cdn 在小提琴中对此进行了测试，我得到了两个图标。您能否为您的导航类提供更多详细信息/css

标签： html css icons font-awesome

【解决方案1】：

您的代码运行良好，见下文。也许你应该添加你的 CSS 来发现问题。

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="navigation">

  <i class="fa fa-instagram"></i>

  <ul>
    <li class="menu active"><a href="discover.html">Discover</a></li>
    <li class="menu"><a href="fashion.html">Fashion</a></li>
    <li class="menu"><a href="portraits.html">Creative portraits</a></li>
    <li class="menu"><a href="client.html">Client work</a></li>
    <br>
    <br>

    <li class="contact"><a href="about.html">About</a></li>
    <li class="contact"><a href="contact.html">Contact</a></li>
  </ul>

  <br>
  <br>
  <i class="fa fa-instagram"></i>

</div>

【讨论】：

【解决方案2】：

您的代码运行良好。添加字体真棒 CDN <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">。这对你有用

【讨论】：