小编Tar*_*que的帖子

<div class="Contact-form">
        <div id= "form-area" class="sadaka-form">
            <h2>CONTACT FORM</h2>
            <input type="text" name="Name" placeholder="Name*">
            <input type="email" name="email" placeholder="E-mail*" >
            <textarea name="message" placeholder="Message*" cols="30" rows="10"></textarea>
            <button class= "form-control">Send message</button>
        </div>
        <div id= "contact-area" class="sadaka-contacts">
            <h3>SADAKA CONTACTS</h3>
            <p>Sadaka ipsum dolor sit amet, consectetur adipiscing elit. Ut at eros rutrum turpis viverra elementum semper quis ex. Donec lorem nulla .</p>
            <ul>
                <li><span><i class="fa fa-map-marker"></span></li>
                <li><span><i class="fa fa-phone"></span></li>
                <li><span><i class="fa fa-envelope"></span></li>
            </ul>
        </div>
    </div>

我的问题是 font Awesome 图标出现了三次。我不知道我哪里做错了？我还包含了错误屏幕截图的链接。

这是图像

我想让我的导航栏看起来像这样http://www.templatemonster.com/demo/51347.html

我所取得的就是这个

请在纠正代码时,说明背后的原因.它会有很大的帮助.谢谢

此外,显示的社交网络图标为黑色,悬停效果使其呈现红色.它是一个图像还是只能在css的帮助下才能实现？

body {
  background:gray;
  /*border: 2px solid yellow;*/
}

.headwrap {
  width: 93%;
  height: auto;
  margin: auto;
  padding-top: 70px;
}

.logo {
  margin: 0;
  float: left;
}

.socialbuttons {
  float: right;
}

.socialbuttons ul {
  list-style: none;
  float: right;
}

.socialbuttons ul li {
  display: inline;
  padding-left: 20px;
}

.navbar {
  margin-top: 40px;
  width: 100%;
  background: #db3636;
  float: left;
}

.navbar ul {
  list-style: none;
  margin: 0;
  float: left;
  padding: 30px 15px;
}

.navbar ul li …