폰트어썸이 최근 version 5로 업그레이드가 되었습니다. 최근 트랜드인 svg 코드를 활용한 방법으로 확 물갈이가 되어서 version4에 비해 사용법이 좀더 단순하고 편해졌습니다.
< 포토샵에서 사용하기 >
우선 포토샵에서 사용하는 방법부터 알아보겠습니다.
사이트 접속 폰트 다운로드
사이트에 접속하여 download Free 버튼을 클릭하여 소스 다운로드합니다.
압축을 풀고 use-on-desktop 폴더안의 폰트 설치
다운로드한 파일의 압축을 해제하고 use-on-desktop 폴더안의 폰트를 모두 선택하고 마우스 우클릭후 설치합니다.
Gliphs(글리프, 자형) 복사하기
fontawesome.com/icons에서 원하는 아이콘 검색 - 찾기원하는 아이콘을 찾기하고 해당 아이콘을 클릭합니다.
copy Gliphs아이콘을 클릭하여 자형(gliphs, 글리프)를 복사합니다.
포토샵에서 텍스트 입력
포토샵에서 type tool을 선택하고 캔버스에 클릭후 붙여넣기 합니다.
그러면 아직 폰트를 지정하지 않았기 때문에 아래와 같이 나옵니다. 텍스트를 모두 선택(ctrl + all) 합니다.
상단 옵션바에서 폰트를 font라고 입력하여 font Awesom 서체를 선택합니다.
그러면 아래와 같이 아이콘이 나타납니다. 글씨이기 때문에 여타 글씨처럼 자유롭게 디자인시 사용하시면 됩니다.
< HTML 마크업 >
웹페이지에서 구현하는 방법을 보도록 하겠습니다.
fontawesome css 로드
css를 로드하는 방식은 cdn(해당 서버)에서 빌려오는 방법과, 다운로드후 불러오는 방법이 있겠습니다.
아래에서 위에서 다운받는 fontawesome.min.css파일을 css 폴더에 넣고
html에서 css를 불러옵니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="robots" content="index, follow"> <title>fontawesome test</title> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> </body> </html> |
구현 방법 1 - tag 방식
fontawesome 사이트에 접속하여 원하는 아이콘을 찾은후 아래와 같이 태그를 복사합니다.
복사한 코드를 원하는 곳에 붙여넣기 합니다.
<body> <h1>Fontawesome 사용법</h1> <h2>방법1 - tag</h2> <i class="fab fa-500px"></i> </body> |
브라우저 화면을 확인하면 아이콘이 나오는 것을 확인 할 수 있습니다.
글씨이기 때문에 css에서 색상, 크기 얼마든지 조절하실 수 있습니다.
[ 브라우저 화면 ]
구현 방법 2 - unicode 방식
fontawesome 사이트에 접속하여 아이콘의 unicode를 복사합니다.
아이콘이 나올자리를 class명 icon으로 하나 만들었습니다.
[ HTML ]
<body> <h1>Fontawesome 사용법</h1> <h2>방법1 - tag</h2> <i class="fab fa-500px"></i> <hr/> <h2>방법2 - unicode</h2> <span class="icon">icon </span> </body> |
[ 브라우저 화면 ]
이제 css에서 아래와 같이 해당 요소의 내용뒤에 공간을 만들고 그 공간안에 unicode로 해당 아이콘이 나오도록 하고 폰트를 반드시 지정해야 합니다.
[ CSS ]
.icon:after { content:'\f26e'; font-family: Font Awesome\ 5 Brands; } |
[ 브라우저 화면 ]
'Youtube 동영상 > the etc.' 카테고리의 다른 글
| [ Map API ] 네이버 지도 API를 웹에 구현하자. (0) | 2019.01.08 |
|---|---|
| [설문 공개] 웹디자이너, 웹퍼블리셔 초임 연봉은? 근무시간은? 애로사항은? 설문 결과를 공개합니다. (0) | 2018.12.10 |
| 네이버 지도(naver map API) 웹페이지에 구현하기 (0) | 2018.03.22 |
| notepad++에 젠코딩 zen-coding 플러그인 설치하기 (0) | 2018.03.22 |
| Fontawesome 버전 4 - 사용방법 4가지 (0) | 2017.05.28 |