[개발 일지]My Story(Font-Awsome, Font)

홍범선·2023년 10월 12일
0

MyStory 개발일지

목록 보기
25/27

📝 아이콘은 어떻게 넣을 수 있나?


실제 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');

프로젝트내에서 폰트를 사용할 수 있다.

profile
알고리즘 정리 블로그입니다.

0개의 댓글