Fontium 사용의 예
Fontium 설치는 간단하게 끝내셨나요?
Fontium에서 간단하게 적용하는 방법 및 CSS 사용법을 알려드립니다.
원하는 아이콘을 찾으시려면 아래의 “Search Fontium Icons”를 이용해주세요.
Fontium 적용 방법
- 1. 홈페이지에서 Fontium을 다운로드 받는다.
- 2. fontium 이라는 폴더명으로 당신의 웹 애플리케이션에 복사한다.
(여기에서는 /common/fontium/에 두었다고 가정한다) - 3. 다운로드 받으신 폴더의 구조는 아래와 같습니다
fontium/css/fontium.css
fontium/fonts/fontium.ttf, fontium.eot, fontium.woff, fontium.woff2 - 4. html <head> 태그 안에 fontium.css 파일 위치를 아래와 같이 가져온다.
- < link rel = "stylesheet" type = "text/css" href = "/common/fontium/css/fontium.css" />
- 5. Search Fontium Icons를 사용해서 쉽게 폰티움을 프로젝트에 적용한다.
Fontium 다운로드
기본아이콘
- fonti um-fontium-logo
- 코드의 간결성을 위해 <i> 태그를 사용하지만 <span> 태그를 사용하는 것이 HTML 의미상으로는 더 정확합니다.
- < i class = "fonti um-fontium-logo" > </i> fonti um-fontium-logo
아이콘 크기조절
- um-1x
- um-2x
- um-3x
- um-4x
- 아이콘의 기본 사이즈에서 <class>를 통해 직접 font-size를 적용하는 형식으로 취합니다.
-
<
i
class
=
"fonti um-magic"
>
</i> um-1x
< i class = "fonti um-magic um-2x" > </i> um-2x
< i class = "fonti um-magic um-3x" > </i> um-3x
< i class = "fonti um-magic um-4x" > </i> um-4x
애니메이션 아이콘
- 폰티움 아이콘을 사용하여 로딩상태 등의 애니메이션을 사용할 수 있습니다.
-
<
i
class
=
"fonti um-spinner-dot um-spin"
>
</i>
< i class = "fonti um-spinner um-spin" > </i>
< i class = "fonti um-spinner-time um-spin" > </i>
< i class = "fonti um-spinner-brush um-spin" > </i>
< i class = "fonti um-spinner-line um-spin" > </i>
< i class = "fonti um-spinner-alt um-pulse" > </i>
< i class = "fonti um-spinner-time-alt um-spin" > </i>
< i class = "fonti um-spinner-brush-alt um-spin" > </i>
회전 아이콘
- Basic
- um-rotate-90
- um-rotate-180
- um-rotate-270
- 아이콘을 90도 각도로 회전시킬 수 있습니다.
-
<
i
class
=
"fonti um-repeat-bold"
>
</i> Basic
< i class = "fonti um-repeat-bold um-rotate-90" > </i> um-rotate-90
< i class = "fonti um-repeat-bold um-rotate-180" > </i> um-rotate-180
< i class = "fonti um-repeat-bold um-rotate-270" > </i> um-rotate-270
부트스트랩 사용의 예
- 부트스트랩과 폰티움 아이콘을 함께 사용하면 더욱 멋지게 사용할 수 있습니다.
-
<
a class
=
"btn btn-default"
href
=
"#"
>
< i class = "fonti um-gear" > </i> SET
</a>
< a class = "btn btn-danger" href = "#" >
< i class = "fonti um-shopping-basket-o" > </i> CART
</a>
< a class = "btn btn-success" href = "#" >
< i class = "fonti um-envelope-o" > </i> MESSAGE
</a>
< a class = "btn btn btn-primary" href = "#" >
< i class = "fonti um-um-heart-o" > </i> WISH
</a>
서울시 영등포구 도영로7길 15-2 103-206
#103-206 15-2, Doyeong-ro 7-gil, Yeongdeungpo-gu, Seoul, Korea
Tel +82-2-865-0408 / Fax +82-2-864-0403
Copyright (c) KOISM Corp. All Right Reserved