Font Awesome 아이콘 넣기

조 은길·2022년 3월 27일

CSS TIL

Html & CSS

목록 보기

35/66

아이콘을 디자인 하려면, 직접 포토샵으로 만들던가 그게 귀찮으면, 여기서 이미 만들어진 것들을 사용할 수 있다.

Font Awesome 라이브러리!!

라이브러리?
코딩 시간을 줄여주는 코드나 자료 같은거!!

Font Awesome 설치 방식

CDN 방식 - Content delivery network
font awesome cdnjs로 검색해보면,
font-awesome CDN

여기를 클릭하고, HTML 안에 <head>에 붙여넣어주면 된다.

장점
- 복사 붙여넣기만 하면 되니까 매우 간단하다.
- 빠르다.
단점
- 컨텐츠 제공 사이트가 다운이 되면, 우리도 이것들을 못 쓴다.
  - 즉, 상당히 불안정하다.
  - 그래서, 안정적으로 사용하고 싶으면, "다운로드 방식"을 사용하자!!

직접 다운로드 방식

https://fontawesome.com/start

파일을 다운로드 받은 다음에, CSS폴더와 webfonts 폴더 빼고, 나머지 다 지워도 된다.
CSS 폴더 안에서도 all.min.css 나 all.css 파일만 쓰기 때문에 나머지 파일들은 지워도 된다.

그럼 첨부는 어떻게 하나요??

CSS 링크 집어넣듯이, link:css 이후에, all.min.css 경로로 설정해주면 된다.

// 예시
<link rel="stylesheet" href="/fontawesome/css/all.min.css" />

webfonts 폴더 용도??
아이콘들을 다 font로 제공하기 위한 폰트 보관용 폴더
=> 안에 내용물을 다 쓰는게 아니라, 실질적으로 woff2 형식만 사용한다.

이제 Font Awesome에서 제공하는 모든 무료 아이콘들을 갖다가 쓸 수 있다.

예시)

i 태그 갖다가 첨부하자!!

사이즈를 조절하고 싶으면, font이기 때문에, font-size: 30px 속성을 이용하자!
- 이게 귀찮다 싶으면,

// fa-3x 이런 거 짚어넣어주면, 된다!! => 3x는 3배 크기 라는 뜻
 <i class="fa-solid fa-bars fa-3x"></i>

실전 예제

폰트 주위에 원형 테두리를 만들고 싶다면, 어떻게 해야할까??

.container i {
  background-color: burlywood;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  // 보더 박스를 적용 안하면, 또 따로 논다!!
  box-sizing: border-box;
  // 패딩을 안 주면, 폰트와 배경이 따로 논다!!
  padding: 28px;
  color: white;
}

Font Awesome 5버전

https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

Font Awesome 다운받아 첨부하기

Font Awesome 홈페이지의 다운로드 메뉴에서 다운받아 압축을 풀면 여러개의 폴더가 나오는데,

이 중에 CSS, Webfonts 두개의 폴더를 여러분 작업폴더에 복붙하시면 됩니다.

그 후에 CSS 폴더 내의 all.css 라는 파일을 하나만 head 태그 안에 딱 첨부해주시면 설치 끝입니다. 나머지 잔챙이 CSS 파일은 다 삭제하셔도 됩니다.

결론
CSS 폴더와 webfonts 폴더를 빼고, 다 지워도 된다.
CSS 폴더 안에서는 all 이나 all.min 둘 중 하나만 남기고 다 지워도 된다.
모든 폴더를 다 남기면 용량이 너무 크다!!

<link href="님 작업폴더에 있는 all.min.css 파일 경로" rel="stylesheet">

Font Awesome CDN으로 첨부하기

CSS파일을 호스팅해주는 고마운 사이트들이 있습니다.
이 사이트가 제공하는 all.min.css 파일을 link태그로 첨부하면 직접 다운받지 않고도 동일한 CSS파일을 이용가능합니다.
구글에 font awesome 5 cdnjs 이런 식으로 검색하면 됩니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

장점은 간편하고 빠르다는 것인데,
이 사이트가 다운이 되면 CSS 파일도 이용이 불가능해져서 불안정할 수 있습니다.