<a href> and font awesome

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:

Answer 1

Well, after debugging your CSS you had two errors:

1. When you call FontAwesome icon using <i>, remember to not change the default class. For example: fa fa-envelope the fa initializes the font-family and the fa-envelope initializes the content number of the icon.

2. Second, when you want to center an absolute element using transorm:translate(-50%,-50%), you have to add the left position to the element left:50%.

Besides that, every thing works great.

---

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:[email protected][email protected]" title="Contact me!" class="x1"><i class="fa fa-envelope"></i></a></li>
                    </ul>
                </nav>
               </div>
               </header>