CSS 선택자로 유튜브 링크에 아이콘 넣기

CSS의 선택자 중 HTML의 속성 값(attribute)를 선택할 수 있는 선택자가 있습니다.

 

[] 대괄호

a[href="https://hi098123.tistory.com/"]{
	color:blue;
}

위의 코드는 a태그의 href속성값이 https://hi098123.tistory.com/ 인 경우를 의미합니다.

 

정확히 일치하면 a태그의 색상은 파란색이 될것입니다.

 

링크에 아이콘 넣기

아래의 코드는 *=을 이용하여 포함하는 경우를 지칭합니다.

contain, indexOf, instr 등의 함수를 생각해볼 수 있습니다.

a[href*="//www.youtube.com"]:before,a[href*="//youtube.com"]:before{
  content: '\ec32 ';
  font-family: 'xeicon';
  color: red;
}

유튜브링크인 경우 유튜브 아이콘을 포함하게 만드는 코드입니다.

여기에는 XEicon이 사용되었습니다.

 

XEicon없이 다른방법으로는 background에 아이콘 이미지를 넣는 방법이 있습니다.

a[href*="//www.youtube.com"]:before,a[href*="//youtube.com"]:before{
  background: url('아이콘 이미지 주소') no-repeat;
}

 

실제 적용예시

유튜브 링크에 아이콘 넣기

 

깃허브 링크에 아이콘 넣기

 

카카오 링크에 아이콘 넣기

 

네이버 링크에 아이콘 넣기

 

구글 링크에 아이콘 넣기