2017-12-15 43 views
1

일부 소셜 버튼을 만들었습니다. Instagram을 제외한 모든 버튼이 표시됩니다. 왜 작동하지 않는지 모르겠습니다. 여기 내 코드는fa faagram 3x가 작동하지 않는 이유는 무엇입니까?

여기
<div class="text-center center-block"> 
       <a href="https://www.facebook.com/shahin.albd"><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a> 

       <a href="https://instagram.com"><i id="social-in" class="fa fa-instagram-square fa-3x social"></i></a> 

       <a href="https://twitter.com"><i id="social-tw" class="fa fa-twitter-square fa-3x social"></i></a>     
      </div> 

내 CSS는 ID가 "사회에서"

#lab_social_icon_footer #social-in:hover { 

색상 : #의 4E433C;

}

답변

0

사용 <i id="social-in" class="fa fa-instagram fa-3x social" aria-hidden="true"></i>. 백그라운드에서 찾고있는 정사각형 기능이 기본적으로 적용됩니다. 출력을 확인하십시오.

#social-in:hover { 
 
    color: #4E433C; 
 
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> 
 
<div class="text-center center-block"> 
 
    <a href="https://www.facebook.com/shahin.albd"><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a> 
 

 
    <a href="https://instagram.com"><i id="social-in" class="fa fa-instagram fa-3x social" aria-hidden="true"></i></a> 
 

 
    <a href="https://twitter.com"><i id="social-tw" class="fa fa-twitter-square fa-3x social"></i></a> 
 
</div>

+0

스 니펫을 실행하려면'link' 태그에서'href' 프로토콜을'https : //'로 변경해야합니다. 그래서'http' 링크를 허용하지 않습니다. –

+0

@ItayGanor 잘 작동합니다. http://prntscr.com/ho1hwo –

+0

@MosharofHossain 문제 없음 :) 도움이되었거나 귀하의 질문을 해결 한 답변을 평가하거나 수락해야합니다. 건배 –

1

FontAwesome는 fa-instagram-square 아이콘이 없습니다. 그들은 단지 fa-instagram만이 있습니다.

그러나, 당신과 같이 사각형 아이콘이 아이콘을 쌓을 수 :

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<span class="fa-stack fa-3x"> 
 
    <i class="fa fa-square fa-stack-2x"></i> 
 
    <i class="fa fa-instagram fa-stack-1x" style="color: white;"></i> 
 
</span>

0

FontAwesome는 인스 타 그램 평방가 없습니다. 인스 타 그램 아이콘이 사각형이기 때문에 필요하지 않습니다. 그냥 사각형을 제거하고 작동합니다.