正在尝试将社交媒体图标添加到顶部栏的左上角
正在尝试将社交媒体图标添加到顶部栏的左上角
提问于 2019-07-10 08:31:02
需要帮助添加在我们的网站上使用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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-07-10 13:34:45
这是我的解决方案。我在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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56961988
复制相关文章
相似问题
腾讯云开发者
