Question

我想在导航栏的末尾添加一个图标。当我把它放在我的ul标签之前时，它显示出来，根据这段代码：

＆＃13;

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

＆＃13;

但是，只要我将图标放在后面，它就不会显示，如此代码所示。

＆＃13;

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

＆＃13;

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

Answer 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>

Answer 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">。这对你有用

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

2 个答案: