| 아이콘 폰트 고르기 |
Icomoon에서 폰트 선택.
IcoMoon App - Icon Font, SVG, PDF & PNG Generator
icomoon.io
라이브러리 아이콘 클릭 또는,
페이지 아래의 메뉴를 클릭하면 다른 프리셋을 볼 수 있음.
사용할 아이콘을 선택하고, 페이지 하단의 Generate Font 메뉴 클릭.
폰트 다운로드!
아이콘들의 이름을 수정할 수 있으며,
설정 아이콘을 클릭하면 사용하게 될 폰트 이름 및 아이콘의 이름 앞에 붙는 접두어를 수정 할 수 있음.
| 블로그에 적용하기 |
다운로드된 파일 압축 해제.
style.css 파일을 메모장에서 열어서 블로그에 맞게 경로를 수정.
font/icomoon 선택 후,
Ctrl + H 눌러서 모두 바꾸기.
찾을 내용 : fonts/icomoon
바꿀 내용 : ./images/icomoon
블로그 관리 - 꾸미기 - 스킨 편집 - HTML 편집 - CSS로 이동해서,
수정된 style.css 내용 모두를 복사-붙여넣기.
블로그 관리 - 꾸미기 - 스킨 편집 - HTML 편집 - 파일 업로드로 이동해서,
fonts 폴더 안의 모든 폰트 파일을 티스토리 스킨 저장소에 업로드.
| 사용하기 |
demo.html
스킨의 html, css에서 적용이 가능하며.
글 작성시, 태그를 넣어서 사용도 가능함.
<i class="아이콘 폰트 이름"></i>
(ex) <i class="icon-bubbles2"></i>
(Demo) 아이콘 폰트 테스트 (폰트 크기나)
(Demo) 아이콘 폰트 테스트
(Demo) 아이콘 폰트 테스트 (색상 조정이 가능)
(ex) <i class="icon-check" style="font-size:16px; color:red"></i> 아이콘 폰트 테스트
| 티스토리 버그 |
에디터의 글쓰기 모드를,
HTML 모드로 변경하였다가 다시 기본모드로 돌아가면 아이콘 폰트 태그의 속성값이 사라지는 버그가 있음.
즉, 글을 수정할 일이 생기면 일일이 다시 태그를 넣어줘야 되는 상황이 생김.....
자주 쓰는 아이콘 폰트가 있다면..
CSS에 아래와 같은 구문을 추가하고,
span.bubbles2::before { font-family:'icomoon'; content:'\e96d' }
span.bubbles4::before { font-family:'icomoon'; content:'\e970' }
글 작성시 아래와 같이 태그를 넣으면 티스토리 버그를 피할 수 있음.
<span class="bubbles2">내용</span>
<span class="bubbles4">내용</span>
| 아이콘을 추가(삭제)하면.. |
새로 받은 파일 압축 해제.
fonts 폴더 내의 파일들을 스킨 저장소에 업로드.
style.css를 메모장에서 열어서 폰트 파일 경로 수정 후 전체 복사.
스킨 편집 - HTML 편집 - CSS로 가서 이전에 추가하였던 부분을 덮어쓰기.
| CSS에서 컬러 지정하기 |
span.bubbles2:before { color:red } - color name
span.bubbles2:before { color:#ff0000 } - HEX
span.bubbles2:before { color:rgb(255, 0, 0) } - RGB
span.bubbles2:before { color:rgba(255, 0, 0, 0.5) } - RGBA (투명도 조절)
HTML Color Codes
Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values.
htmlcolorcodes.com
| Larus Seeker님만 보실 수 있는 문단입니다.. |
위의 '티스토리 버그' 문단의 마지막 내용처럼,
HTML 코드도 CSS에 추가시켜 놓고 쓰시면 조금 더 편하게 글을 작성하시지 않을까 생각됩니다.
HTML Symbols, Entities and Codes — Toptal Designers
Easily find HTML symbols, entities, characters and codes with ASCII, HEX, CSS and Unicode values; including copyright sign, trademark sign and at symbol.
www.toptal.com
성별을 나타내는 심볼같은 경우에,
CSS에 아래의 구문을 추가.
span.male:before { content:'\2642' }
span.female:before { content:'\2640' }
글 작성시 아래의 태그를 추가.
<span class="male"> </span>갈매기
<span class="female"> </span>갈매기
(Demo) 갈매기
(Demo) 갈매기
서식을 몇 개 만들어 놓으면 편하실겁니다..
