* font awesome 에서 아이콘 이용하기*
< 사용 전>
1. font awesome 접속
http://fontawesome.io/
2. get stated
3. Downroad
4. pro & 보통 중 선택하기
5. 다운로드 받아서 압출 풀기
6 해당 폴더 안의 fonts 폴더를 index.html과 같은 폴더로 옮긴다
* less, scss : 전처리기 관련된 것. 사용하지 않는다
7. 또 그 폴더로 가서 그 폴더 안의 css 폴더
8. 사용하는 css폴더 안에 선택하여서 넣어야 한다.
- 위의 font-awesome 파일 : 가독성이 좋게 만들어졌다.
- 아래의 font-awesome.min: 공백을 없앰으로써 용량을 줄였다 ( -> 트래픽폭발 조금이라도 예방 가능)
- 원하는 것 선택하여 css 폴더 안에 넣는다.
9. 다 완료 했을 때의 폴더 모습 위의 과정을 다 했다면 font-awesome-4.7.0폴더는 삭제해도 된다.
10. 다운로드 했던 창에서 조금 더 내려 Using CSS 아래의 내용을 복사한다.
11. index.html 의 head 부분에 복사해서 넣는다. font-awesome.min.css (or font-awesome.css) 의 위치를 잘 적어준다.
< 사용시 >
1. 상단 메뉴에서 icons
2. 원하는 것을 클릭한다. 아래의 코드 복사
3. HTML 파일에 넣는다. (i태그)
↓ 결과
<icon 을 CSS로 꾸밀 수 있다.>
1. id만들어주기 (편의를 위해 만들었다)
2. CSS 적용
3. 결과
'프론트엔드 > HTML & CSS' 카테고리의 다른 글
| <HTML&CSS> 에서 개발자 도구 사용하기 (1) | 2017.06.27 |
|---|---|
| <HTML5 & CSS3> 크로스브라우징 (0) | 2017.06.19 |
| <HTML & CSS> 레이아웃 실습 (clearfix 사용) (0) | 2017.06.16 |
| <HTML & CSS > 레이아웃 기초 (0) | 2017.06.16 |
| <HTML & CSS> float 문제점 해결하기 (clearfix) (0) | 2017.06.16 |