Django - 10. Fontawesome 5 구현하기

Django - 10. Fontawesome 5 구현하기 

 

Fontawesome 5이란? 

 

font 와 icon 툴킷 기반의 css 라고 생각하면된다. fontawesome.com 에서 툴킷을 다운로드 받는다. 

"Start for Free" 클릭하고 들어가면 아이콘을 다운로드 받을수 있다. 

다운로드 받은 파일에서 fontawesome-all.min.css 을 static/css/ 폴더에 복사해 넣는다. 

 

다음은 webfonts 폴더 전체를 복사해서 static 폴더 아래로 복사한다. 

터미널로 돌아와서 python manage.py collectstatic 명령어를 통해서 모든 static 파일을 한번 정리(?)한다. 

프로젝트 파일로 돌아와서 base.html 코드에 조금전에 다운로드 받은 fontawesome css 파일을 링크 걸어준다. 

이제 fontawesome 웹사이트로 돌아가서 icons 중에 search 아이콘을 검색한다. 

검색 결과로 몇가지 아이콘이 나오는데, 원하는 아이콘을 클릭하면 큰이미지와 아래에 사용할수 있는 코드를 제공해준다. 그 코드를 복사해서 원하는 곳에서 사용하면된다. 

 

base.html 에서 "search"문구를 아이콘으로 대치한다. 

그리고 다시 서버를 구동하고 화면을 오픈한다. 

이번에는 카트를 찾아서 아이콘으로 변경본다. 

원하는 아이콘의 코드를 찾아서 html코드를 찾아서 복사한다. 

navbar.html

끝.