Javascript 使用fontawesome在文本前显示facebook、twitter和instagram图像

我正试图做一件非常简单的事情，但我不知道我怎么能做到。。我有这个，这是完全一样的，我的左导航，其中顶部是有点透明，底部是黑色的图像。这是我的JSFIDLE，您可以在其中看到我的左侧导航：

所以在左边的导航栏上，我想把一些东西放在黑色图像开始的地方，就像我在图像链接中所做的那样。我在div下面添加了一行，但没有在正确的位置显示：

<ul>
    <li><i class="fa fa-facebook-square" style="float:left"></i></li>
    <li><i class="fa fa-twitter-square" style="float:left"></i></li>
    <li><i class="fa fa-instagram" style="float:left"></i></li>
</ul>

<a class="login" href="#">Log In&nbsp&nbsp&nbsp&nbsp&nbsp|</a> 
<a class="login" href="#">Sign Up</a> 

---

还有，我们如何在

登录|注册

文本上方获得相应的facebook、twitter和instagram图像。我相信我们需要在这里使用，但我很困惑，因为我也在使用它，但它仍然不适合我。关于如何做与导航图像链接底部完全相同的事情的任何想法。

编辑以缩小空白。（在

.company bio

CSS中注明）-调整值以使您受益

在这里和那里还添加了一些类，它们也在CSS中被注意到

*{
边际：0px；
}
身体{
边际：0px；
溢出x：隐藏；
}
P
跨度
h1，
h2，
h3，
h4，
h5，
h6，
运输署，
分区，
ul，
李{
边际：0px；
填充：0px；
文字装饰：无；
列表样式：无；
}
/*添加类*/
.登录{
位置：相对位置；
顶部：-50px；
z指数：9999；
颜色：白色；
文字装饰：无；
填充：0 10px；
字体大小：13px；
}
.注册{
位置：相对位置；
顶部：-50px；
z指数：9999；
颜色：白色；
文字装饰：无；
填充：0；
字体大小：13px；
}
.以上{
显示器：flex；
柔性流：行换行；
调整内容：灵活启动；
位置：相对位置；
z指数：9999；
顶部：-60px；
填充：0 5px；
}
法兰西{
颜色：白色；
保证金：5px；
}
/*结束添加的类*/
img{
/*将“最大宽度”设置为包含元素的100%*/
最大宽度：100%；
最大高度：100%；
}
body.公司bio p{
字体系列：“议程”；
边缘底部：20px；
字母间距：.18em；
字体系列：“议程”；
字体大小：400；
颜色：rgb（2542555）；
}
分区公司-bio{}
身体，公司简介{
/*添加这些以缩小差距*/
位置：相对位置；
顶部：-42px；
/*结束新的*/
填充顶部：40px；
左边距：131px；
/*刚才加的*/
填充底部：40px；
最大宽度：100%；
背景：url（“https://s30.postimg.org/l04wudgs1/grey-bar.png");
左侧填充：140px；
右边填充：155px；
字体大小：20px；
字体系列：“阿德勒体育”；
}
.顶部h1{
颜色：#f86d2c；
字体：斜体；
字体大小：37px；
}
.top p{
颜色：白色！重要；
背景色：黑色；
}
.任务声明.计划{
位置：相对位置；
顶部：60px；
宽度：300px；
边框样式：实心；
边框宽度：4px；
文本对齐：居中；
字号：19px；
边框颜色：#EF7440；
填充：25px；
利润率：25px；
左边距：自动；
右边距：自动；
文本阴影：1.5px2.598px7.65pxRGBA（40,40,41,0.16）；
字体系列：“阿德勒常规”；
颜色：rgb（40,40,41）；
线高：1.979；
}
.顶部h4{
字体大小：25px；
字体系列：“ITC前卫哥特式”；
颜色：rgb（255、255、255）；
文本转换：大写；
线高：1.792；
文本对齐：左对齐；
-莫兹变换：矩阵（1.65479981820633,0,0,1.66565153423699,0,0）；
-webkit变换：矩阵（1.65479981820633,0,0,1.66565153423699,0,0）；
-ms变换：矩阵（1.65479981820633,0,0,1.66565153423699,0,0）；
位置：绝对位置；
左：684.247px；
顶部：280.77px；
}
.顶部h2{
位置：绝对位置；
顶部：320px；
左：450px；
字母间距：.3em；
字体大小：22px；
字体系列：“先锋派”，先锋派，“世纪哥特式”，世纪哥特式，AppleGothic，无衬线；
颜色：rgb（255、255、255）；
文本转换：大写；
线高：1.6；
文本对齐：居中；
文本阴影：0px 3px 6.37px rgba（40,40,41,0.004）；
}
body.northmanwild.标题{
/*背景图片：url（assets/img/Uploads/insta pics.png）*/
宽度：100%；
填充底部：40px；
填充顶部：40px；
文本对齐：居中；
字体大小：37px；
边际顶部：0px！重要；
页边距底部：0px！重要；
字体系列：“阿德勒体育”；
颜色：rgb（255、255、255）；
字体大小：粗体；
字体：斜体；
线高：1.979；
文本对齐：居中；
/*文本阴影：1.5px2.598px7.65pxRGBA（40,40,41,0.5）；
不透明度：100%；
填充率：57%；
*/
}
div.leftBar-bottom{
背景图像：url（“https://s17.postimg.org/yvv4w2gmn/nav-background.png");
浮动：左；
}
诺思曼威德分区{
页边顶部：-2px；
宽度：90.1%；
浮动：对；
不透明度：0.8；
边缘底部：-7px；
}
正文.页脚{
宽度：90.3%；
浮动：对；
颜色：rgb（40,40,41）；
填充顶部：30px；
垫底：20px；
字体大小：正常；
背景大小：100%100%；
背景重复：无重复；
背景图片：url（assets/img/Uploads/footer bg.png）；
}
/*找出任务陈述中的问题*/
机构.任务说明{
左边距：131px；
填充底部：130px；
左侧填充：45px；
右边填充：45px；
背景大小：100%100%；
背景重复：无重复；
背景图片：url（assets/img/Uploads/bg trees.png）；
}
尸体，任务声明，为什么{
填充顶部：40px；
字体系列：“先锋派”，先锋派，“世纪哥特式”，世纪哥特式，AppleGothic，无衬线；
填充底部：40px；
左侧填充：40px；
位置：相对位置；
左：-40px；
顶部：30px；
}
身体，任务陈述，怎么做{
填充顶部：40px；
字体系列：“先锋派”，先锋派，“世纪哥特式”，世纪哥特式，AppleGothic，无衬线；
垫底：10px；
右边填充：40px；
}
尸体，任务声明，什么{
填充顶部：40px；
填充底部：40px；
左侧填充：40px；
字体系列：“先锋派”，先锋派，“世纪哥特式”，世纪哥特式，AppleGothic，无衬线；
位置：相对位置；
左：-40px；
顶部：30px；
}
身体。任务声明。为什么要提前{
填充lef