Font Awesome 아이콘 넣기
Last updated
Last updated
웹개발하다보면 아이콘이 필요할때가 종종 있는데 그럴때 사용하는 라이브러리 입니다.
Font Awesome 5버전
Font Awesome 다운받아 첨부하기
Font Awesome 홈페이지의 다운로드 메뉴에서 다운받아 압축을 풀면 여러개의 폴더가 나오는데,
이 중에 CSS, Webfonts 두개의 폴더를 여러분 작업폴더에 복붙하시면 됩니다.
그 후에 CSS 폴더 내의 all.css 라는 파일을 하나만 head 태그 안에 딱 첨부해주시면 설치 끝입니다. 나머지 잔챙이 CSS 파일은 다 삭제하셔도 됩니다.
Font Awesome CDN으로 첨부하기
CSS파일을 호스팅해주는 고마운 사이트들이 있습니다.
이 사이트가 제공하는 all.min.css 파일을 link태그로 첨부하면 직접 다운받지 않고도 동일한 CSS파일을 이용가능합니다.
구글에 font awesome 5 cdnjs 이런 식으로 검색하면 됩니다.
장점 - 빠르고 간편함
단점 - 이 사이트가 다운되면 css 파일도 이용이 불가능해짐
Font Awesome 아이콘 넣기
1. Font Awesome 5버전 홈페이지의 icons 메뉴로 들어가신 후
2. 마음에 드는 아이콘을 선택한 후
3. 예제 코드를 HTML에 복붙하시면 됩니다.
이러면 책 아이콘이 하나 나오게됩니다.
사이즈나 색 수정은 글자 수정하는 것과 똑같이 하시면 됩니다.
혹은 이런 방식으로도 사이즈 수정이 가능함