라인어썸안에 링크를 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" >
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;
}
}
}'반응형 웹사이트 > Shilla Hotel' 카테고리의 다른 글
| 가상클래스를 이용하여 메뉴 사이 '|' 넣기 (0) | 2021.01.28 |
|---|---|
| flex-direction으로 헤더 세로 정렬하기 (0) | 2021.01.27 |
| 시각장애인을 위한 u-skip 넣기 (0) | 2021.01.27 |
| 애니메이션으로 텍스트가 순서대로 올라오는 효과내기 (0) | 2021.01.27 |
| 가상클래스로 마우스오버시 불켜지는 효과 내기 (0) | 2021.01.27 |
댓글