html - 和字体真棒

Answer 1

好吧，在调试完你的 CSS 之后，你遇到了两个错误：

1. 当你调用 FontAwesome 图标时<i>，记住不要更改默认值class。例如：初始化图标fa fa-envelope和初始化图标的编号。fafont-familyfa-envelopecontent

2. 其次，当您想使用 将绝对元素居中时transorm:translate(-50%,-50%)，您必须将左侧位置添加到元素left:50%。

除此之外，每件事都很好。

---

header {
    background: #111111;
    width: 100%;
    font-weight: 400;
    position: absolute;
    top: 0;
    height:200px
}

/*Navigation Start*/

#bara-wrap {
    max-width:1040px;
    margin: 0 auto;
}

ul.social {
    display: inline-block;
    text-align: center;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    width: 100%;
    left: 50%;
}

li.x1 {
    display: inline;
    color: #fff;
    padding: 0 2em;
}

a.x1 {
    color: #fff;
    text-decoration: none;
    font-size: 2.5rem;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<header>
<div id="bara-wrap">
<nav id="social">
                    <ul class="social">
                        <li class="x1"><a href="https://www.facebook.com" target="_blank" title="Facebook Page" class="x1"><i class="fa fa-facebook-f"></i></a></li>
                        <li class="x1"><a href="mailto:xt@xu.com?ccy@y.com" title="Contact me!" class="x1"><i class="fa fa-envelope"></i></a></li>
                    </ul>
                </nav>
               </div>
               </header>