<a href> 및 글꼴 awesome

모든 것이 잘 작동하지만 아이콘 위의 링크 만 누르면됩니다. 그 중간에 가면 링크가있을 때 나타나는 손이 나타나지 않습니다. (나는 내 상황을 설명하는 방법을 모르겠다. 당신이 이해하기를 바란다)<a href> 및 글꼴 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>

출처

2017-12-24 octnic

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

출처

2017-12-24 16:39:22 M0ns1f

<a href> 및 글꼴 awesome

답변

관련 문제