[css] ::before ::after로 폰트어썸 넣기

블로그를 꾸미고 싶어서 이것저것 만지다가 메뉴탭에 아이콘을 넣고 싶어졌음

평소에 가상요소 선택자를 잘 안썼는데 지금 사용하는 스킨 특성상 ::before ::after를 활용할 일이 많아져서 나름 재미를 느끼는 중

아무튼,

 

내 목표는 메뉴탭에 각기 다른 아이콘을 앞에 삽입시켜주고 싶었기 때문에 nth-child()또한 같이 활용함

(더 좋은 다른 방식도 있을거같음)

li:nth-child(1) .link_item::before{
    content:"\f233";
    font-family:"Font Awesome 5 Free";
    font-weight:900;
    margin-right:4px;
  }

한번에 잘 되지 않았었는데 우선 첫번째로, content 부분에 그냥 아이콘 코드를 넣으면 인식을 못하던것, 앞에 \(역슬래시)를 붙여줘야 했다.

또, font-family 이 부분에 들어가는 "Font Awesome 5 Free" 의 대소문자를 구분하기 때문에 Free를 free로 작성할때 잘 먹지 않았던것

마지막으로 font-weight의 경우 300,400,900 단위로 지정되어있다고 한다.

 

❗️가상요소 선택자를 사용하여 아이콘을 넣을경우 몇몇 아이콘은 인식을 잘 못하는 상황이 있는데 이 부분은 해결하지 못했음❗️