Question

Everything works fine, but I can press on the link only at the base of the icon. If I go on the middle of it, that hand which appears when there's a link doesn't appear. (I don't know how to explain my situation, I hope you understand it)

So basically works only at the bottom of the icons. (a really small portion of it). How can I fix this? (using HTML & CSS, not jQuery)

This is my code:

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>

Answer 1

好吧，在调试CSS之后，你有两个错误：

使用<i>调用FontAwesome图标时，请记住不要更改默认class。例如：fa fa-envelope fa初始化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>

<a href=""> and font awesome

1 个答案: