2
すべてうまくいきますが、アイコンの下にあるリンクだけを押すことができます。真ん中に行くと、リンクがあるときに現れる手は現れません。 （私は自分の状況を説明する方法を知らない、それを理解することを望む）<a href>とfont awesome
これは基本的にアイコンの下部にのみ動作します。 （それの本当に小さな部分）。これをどうすれば解決できますか？
（HTML & CSS、ないのjQueryを使用して）これは私のコードです：
header {
background: #111111;
width: 100%;
font-weight: 400;
position: absolute;
top: 0;
}
/*Navigation Start*/
#bara-wrap {
max-width: 1040px;
margin: 0 auto;
}
body {
background: #000;
}
#social {
float: right;
width: 11%;
}
ul.social {
display: inline-block;
text-align: center;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
width: 100%;
}
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"/>
<body>
<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="fab fa-facebook-f"></i></a></li>
<li class="x1"><a href="mailto:[email protected][email protected]" title="Contact me!" class="x1"><i class="far fa-envelope"></i></a></li>
</ul>
</nav>
</div>
</header>
</body>