<a href> 和字体很棒答案

【问题标题】：<a href> and font awesome<a href> 和字体很棒
【发布时间】：2017-12-24 16:23:52
【问题描述】：

一切正常，但我只能点击图标底部的链接。如果我走到它的中间，当有链接时出现的那只手不会出现。（不知道怎么解释我的情况，希望你能理解）

所以基本上只适用于图标的底部。（其中很小的一部分）。我怎样才能解决这个问题？（使用 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:xt@xu.com?ccy@y.com" title="Contact me!" class="x1"><i class="far fa-envelope"></i></a></li>
      </ul>
    </nav>
  </div>
</header>
</body>

【问题讨论】：

标签： html css font-awesome font-awesome-5

【解决方案1】：

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

当您使用<i> 调用FontAwesome 图标时，请记住不要更改默认class。例如：fa fa-envelopefa初始化font-family，fa-envelope初始化content图标编号。
其次，当你想使用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>

【讨论】：