폰텔로(Fontello)
아이콘 폰트를 무료로 제공하는 사이트.
필요한 것만 골라 쓸 수 있으므로 보다 로딩속도가 빠르고 효율적이다.
티스토리에 적용해보자.
(이미지 캡쳐 : Fontello)
공식홈페이지에 접속하면 위와 같다.
Icon fonts generator. 말그대로 아이콘 폰트를 생성하는 페이지.
화면
(이미지 캡쳐 : Fontello)
① 검색
② 원하는 파일명(비워둘 경우 Fontello로 설정됨)
③ 다운로드
④ 선택한 아이콘
자, 원하는 아이콘을 다운받자.
압축해제
위와 같다면 css폴더를
먼저 열어보자.
CSS 폴더
자신이 설정한 이름으로 css파일이 생성된다.
열어보자
우클릭->편집 선택.
열렸다
사실 메모장은 보기 불편하다.
개인적으로 Sublime text 프로그램을 추천하지만
아직 해당 프로그램 설명전이므로 메모장으로 살펴보겠다.
잠깐 Sublime text 프로그램 실행창을 소개하자면,
이렇게 깔끔하게 볼 수 있다.
이건 다음에 소개하기로 하고, 계속해서
경로설정
총 5개의 ../font/를 찾으면 된다.
우리는 티스토리에서 사용할 것이므로
./font 부분을 지울 것이다.
궁금해하는 친구들을 위해 짚어보면,
이유
src는 source의 줄임말, url은 아시다시피 주소,
점(.)이 하나면 현재 위치, 점(.)이 두개면 한 단계 상위,
슬래시(/)는 디렉터리가 된다.
즉, 상위 폴더 'font'의 it-ing.eot 파일을 지정해주는 명령어다.
하지만
티스토리 HTML/CSS 편집기의 파일업로드를 이용하게되면
images 폴더로 모든 파일이 모이게 된다.
즉, 우리에겐 상위폴더란 존재하지 않는다.
그래서 현위치로 수정해 주는 것이다.
수정 후
이렇게 5개 항목을 수정한 후 저장한다.
Font 폴더
이번엔 font 폴더로 이동한다.
4개의 파일과 앞서 수정한 css파일을 파일업로더로 티스토리에 올린다.
이렇게
HTML/CSS 편집 -> 파일업로드 탭을 선택하여 5개 파일을 업로드하면
위와 같이 올린 파일이 보인다.
적용
HTML문서 <head> </head> 안에 넣는다.
사용
폰텔로 홈페이지에서 마우스를 올려두면 name을 확인할 수 있다.
또는
업로드 했던 파일을 열어보면,
확인
하단에 자신이 선택한 아이콘 클래스명이 기재되어 있다.
삽입
원하는 위치에 위와 같은 형태로 삽입하면 사용할 수 있다.
즉, class 안에 'icon-이름'으로 접근하고,
입맛에 맛게 크기나 색깔도 적용 가능하다.
에디터
글에 넣고싶다!
이럴 때는 HTML 항목에 넣어주면 된다.
단, 에디터에서는 미리보기로만 확인 가능하다.
결과
끝!
+ 추가
만약 기존의 기록들이 fontello 홈페이지에 남아있지 않을 때,
손쉽게 불러오는 방법을 덧붙여본다.
당황하지말고
font 폴더에 있는 xxx.svg 파일을 찾는다.
그리고 저 부분에 끌어다 놓자.
그러면 나타날 것이다.
진짜 끝!
'IT > WEB, UI, UX' 카테고리의 다른 글
| [웹 서비스 개발 환경 구축 ①] 이클립스 :: 스프링 프레임워크 설치하기 (0) | 2016.04.29 |
|---|---|
| [UX] UX(User Experience) :: 개념, 목업 및 프로토타입 도구, 와이어프레임 (0) | 2016.04.13 |
| 티스토리 블로그 :: 웹 페이지 로딩속도 최적화하기 (0) | 2016.03.14 |
| 미디어쿼리 :: 반응형 웹 디자인 기초 (0) | 2016.03.03 |
| 티스토리 디자인 팁 :: 댓글 프로필버튼 제거, 메인페이지 설정, 카테고리 변경 (3) | 2016.03.02 |