본문 바로가기
  • purple-whale
반응형 웹사이트/Shilla Hotel

line-awesome을 이용한 SNS 아이콘 넣기

by purple-whale purple-whale 2021. 1. 27.

 라인어썸안에 링크를 html <head> 안에 넣어 링크시켜 줍니다.

<link rel = "stylesheet" href = "https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css" >

 

icons8.com/line-awesome/howto

 

Download 158k Free Icons + Illustrations, Photos, and Music

Download design elements for free: icons, photos, vector illustrations, and music for your videos. All the assets made by designers → consistent quality ⚡️

icons8.com

원하는 SNS아이콘을 검색합니다.

원하는 디자인을 클리하면 나오는 창의 하단 태그를 복사합니다.

<h2 class="blind">sns 바로가기</h2>
<ul class="link-sns">
<li>
  <a href="#">
    <i class="lab la-facebook-f"></i>
    <span class="blind">facebook</span>
  </a>
</li>
<li>
  <a href="#">
    <i class="lab la-twitter"></i>
    <span class="blind">twitter</span>
  </a>
</li>
  <li>
    <a href="#">
      <i class="lab la-instagram"></i>
      <span class="blind">instargram</span>
    </a>
  </li>
</ul>

<a>안으로 넣어주어야 클릭이 가능합니다.

감춰줄 글씨를 <span>태그로 감싸주고 class를 blind로 넣어 화면에서 보이지 않게 해줍니다.

.nav-goto {
    margin-top: auto; margin-bottom:100px;
    ul {
        display: flex;
        justify-content: center;
        a {
            display: block; 
            text-transform: uppercase;
            &:hover {
                color:$pt;
            }
        }
    }
    .link-goto {
        margin-bottom: 20px;
        a{
            padding: 0 10px;
            font-size: 1.2em;
            letter-spacing : -0.1em;
        }
        :last-child {
            a{
                border-left: 1px solid $dk;
            }
        }
    }
    .link-sns {
        a {
            font-size: 2em;
            color: $dk;
            padding: 5px 10px;
        }
    }
}

 

 

 


모두 같은 아이콘을 적용시키는 경우에는 CSS파일에 넣어주면 편리하게 관리가 가능합니다.

원하는 도형을 클리하여 나타난 창의 첫번째 아이콘을 오른쪽 마우스 클리하고 하단 검사를 선택합니다.

하위 메뉴를 계속 열어 나타난 ::before 를 선택하면 아이콘의 고유 번호가 나옵니다. 글씨를 복사하고 a태그 안에 가상 클래스 ::before를 만들고 content 안에 붙여넣습니다.

여기서 끝나면 아이콘은 나타나지 않습니다. 아이콘 또한 폰트로 여겨지기 때문에 <i>태그를 선택하면 나타나는 폰트와 폰트스타일을 복사하여 함께 붙여 넣습니다.

$nav-icon : "\f04d";

#gnb { 
    margin: 150px 0 0;
    a{
        display: block;
        padding: 15px 0px 14px 70px;
        font-size: 1.3em;
        color: $dk;
        &::before {
           content: $nav-icon;
           margin-right: 5px;
           font-family: 'Line Awesome Free';
           font-weight: 900;
        }
        &:hover {
            color:$pt;
        }
    }
}

댓글0