실제 velog를 보게 되면 탭마다 고유 ICON이 있는 것을 볼 수 있다. 이것은 Font Awesome이라는 사이트에서 얻어 올 수 있다.
font-Awsome
위에 사이트에서 원하는 icon을 HTML코드로 가져오고
<i className="fa fa-clock-o"></i>
<i className="fa fa-heart-o"></i>
이런식으로 사용하면 된다.
물론
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
이 링크를 사용해야지 html에서 사용할 수 있다.
본 프로젝트에서 구글 폰트 중 Noto Sans Korean이라는 폰트를 사용하였는데 이 말고도 다른 폰트들이 있다.
https://fonts.google.com/
폰트를 선택하고
@import url('https://fonts.googleapis.com/css2?family=Cute+Font&family=Noto+Sans+KR:wght@400;500;700&family=Overpass&family=Source+Code+Pro:wght@200;300;400;500&display=swap');
프로젝트내에서 폰트를 사용할 수 있다.