尝试将社交媒体图标添加到顶部栏的左上角

Question

需要帮助使用 html 在我们网站的顶部栏左侧添加社交媒体图标。我使用 html 添加了这个顶部栏，所以我不介意添加带有左对齐社交媒体图标的新代码，我有照片，所以只需要代码。此外，尝试为每个项目添加菜单分隔符，我也不知道该怎么做。网址：http://www.stephensengineering.com/stephens33/

     
     #navbar ul { 
    	margin: 0; 
    	padding: 10px; 
    	list-style-type: none;
    	text-align: right; 
    	background-color: #000; 
    	} 
     
    #navbar ul li {  
    	display: inline; 
    	} 
     
    #navbar ul li a { 
    	text-decoration: none; 
    	padding: .2em 1em; 
    	color: #fff; 
    	background-color: #000; 
    	} 
     
    #navbar ul li a:hover { 
    	color: #000; 
    	background-color: #fff; 
    	} 
     
    	#navbar{
        position: fixed;
        z-index: 100000; /*To bring the navbar to the top of the stacking context*/
        width: 100%;
        }
    	nav.stricky-fixed.fadeInDown.animated{
    
       top:40px; /*Since this element is already set as relative in the original code,
                  the top property places the slideIn menu 40px (height of black nav menu)
                  from the top of the page.*/
    
      }       

    <div id="navbar"> 
      <ul>
    	<li style="float:left"><a class="active" href="about">facebook</a></li>
    	<li style="float:left"><a class="active" href="#about">twitter</a></li>
    	<li style="float:left"><a class="active" href="#about">linkedin</a></li>
    	<li><a href="mailto:project@stephensengineering.com">project@stephensengineering.com</a></li> 
    	<li><a href="+18883000642">888-300-0642</a></li> 
    	<li><a href="http://github.com">Stephens University</a></li> 
    	<li><a href="http://github.com">Submit Assignment</a></li> 
      </ul> 
    </div>      

Answer 1

这是我的解决方案。我在 css 文件的底部添加了几行代码。在 html 文件中，我在相应的标签内添加了 img 标签。希望对你有帮助。

#navbar ul { 
    	margin: 0; 
    	padding: 10px; 
    	list-style-type: none;
    	text-align: right; 
    	background-color: #000; 
    	} 
     
    #navbar ul li {  
    	display: inline; 
    	} 
     
    #navbar ul li a { 
    	text-decoration: none; 
    	padding: .2em 1em; 
    	color: #fff; 
    	background-color: #000; 
    	} 
     
    #navbar ul li a:hover { 
    	color: #000; 
    	background-color: #fff; 
    	} 
     
    	#navbar{
        position: fixed;
        z-index: 100000; /*To bring the navbar to the top of the stacking context*/
        width: 100%;
        }
    	nav.stricky-fixed.fadeInDown.animated{
    
       top:40px; /*Since this element is already set as relative in the original code,
                  the top property places the slideIn menu 40px (height of black nav menu)
                  from the top of the page.*/
    
      }

.social-icon-wrapper:hover {
  background-color: transparent !important;
}
.social-icon {
  width: 20px;
  vertical-align: top;
}

<div id="navbar"> 
      <ul>
    	<li style="float:left"><a class="social-icon-wrapper" href="#about"><img class="social-icon" src="https://i.imgur.com/tonPA8V.png"></a></li>
    	<li style="float:left"><a class="social-icon-wrapper" href="#about"><img class="social-icon" src="https://i.imgur.com/fEvitJl.png"></a></li>
    	<li style="float:left"><a class="social-icon-wrapper" href="#about"><img class="social-icon" src="https://i.imgur.com/UiwMSrt.png"></a></li>
    	<li><a href="mailto:project@stephensengineering.com">project@stephensengineering.com</a></li> 
    	<li><a href="+18883000642">888-300-0642</a></li> 
    	<li><a href="http://github.com">Stephens University</a></li> 
    	<li><a href="http://github.com">Submit Assignment</a></li> 
      </ul> 
    </div>