무료웹폰트 액시콘 - 한국형폰트어썸
액시콘은 자바스크립트 없이 CSS만으로 조작이 가능하며, 간단한 태그만으로 쉽게 아이콘을 적용할 수 있다.
적용 방법은 폰트어썸과 동일하며, 사용방법 역시 폰트어썸과 동일하다.
900개가 넘는 벡터 아이콘으로 쉽고 빠르게 웹어플리케이션을 구축할 수 있다.
무료웹폰트 액시콘의 홈페이지
무료웹폰트 액시콘 아이콘 검색 도구 클릭
무료웹폰트 액시콘의 아이콘 검색 페이지
무료웹폰트 액시콘의 아이콘 검색 페이지에서 다운로드 이미지 클릭
오른쪽 액시콘 바구니에 아이콘 코드 생성
<i class="axi axi-download"><i>
폰트어썸과 동일하게 적용 코드를 볼 수 있다.
예를 들자면
스핀 적용시
<i class="axi axi-download axi-span"></i>
90도 회전시
<i class="axi axi-download axi-rotate-90"></i>
뱃지적용시
<i class="axi axi-download axi-badge"></i>
로 적용하면 된다.
액시콘은 폰트어썸도 검색페이지에서 바로 찾아 적용할 수 있다.
액시콘의 설치
액시콘은 단 두줄만 추가해 주면 바로 사용이 가능한다
html <head>태그안에
<link rel="stylesheet"type="text/css" href="http://cdn.axisj.com/axicon/axicon.min.css" />
위 코드를 붙이면 된다.
HTTPS의 경우
<link rel="stylesheet"type="text/css" href="https://d3alcypgpxy1qk.cloudfront.net/axicon/axicon.min.css" />
위 코드를 붙이면 된다.
Import CSS 적용 방법은 액시콘 홈페이지에서 액시콘을 다운로드 받고 axicon이라는 폴더명으로
웹에 복사해 넣어준후(/axisj/axicon/으로 가정) html<head>태그 안에 axicon.min.css파일 위치를 가져오면 된다.
<link rel="stylesheet" type="text/css" href="/axisj/axicon/axicon.min.css" />
액시콘을 사용하기 위한 준비가 끝났다면 이제 액시콘 검색 도구를 이용해 html,css 에 코드를 적용해 주면된다.
기본 코드 적용
<i class="axi axi-download"></i>
아이콘 크기 (font-size 적용 형식)
<i class="axi axi-ion-load-a" style="font-size:60px"></i>
엑시스제이 버튼과 함께 사용
<button class="AXButton"><i class="axi axi-axisj"></i> AXISJ</button><br />
자바스크립트 없이 CSS만으로 유용하게 사용할 수 있고 간단한 태그만으로 쉽게 아이콘을 적용할 수
있다. 특히 '악수(AXU, 반응형 디자인 프레임워크)'사용시 빠르고 쉽게 이쁜 아이콘을 적용할 수 있다.
[출처 : 액시콘]
'Daily Life > Blog' 카테고리의 다른 글
| 블로그 타이틀 폰트 CSS 적용하기 (0) | 2015.04.07 |
|---|---|
| 블로그꾸미기::티스토리 본문 상단/하단/좌우 광고 삽입하기 (4) | 2014.12.08 |
| 티스토리 초대장 배포 2차 [종료] (21) | 2014.09.02 |
| 티스토리 초대장 배포 1차 [종료] (20) | 2014.07.18 |
| 색상표::색상이름::색상코드::색상태그 (16) | 2014.03.20 |
| Html/CSS border 속성(테두리 선 점선 파선 이중선 입체선) (4) | 2014.03.19 |
| 폰트어썸::폰트어썸그래프 (0) | 2014.03.11 |
| 아이프레임 삽입 블로그 포스팅 (0) | 2014.02.06 |
