Example of use of Fontium
Did you finish install of Fontium simply?
Fontium lets you know simple application methods and how to use CSS.
TO find icons you want, use “Search Fontium Icons” below.
Application method of Fontium
- 1. Download Fontium from our homepage.
- 2. Copy Fontium onto folder named Fontium in your web application.
(Suppose that it was placed /tonisj/fontium.) - 3. The folder structure you downloaded is below.
fontium/css/fontium.css
fontium/fonts/fontium.ttf, fontium.eot, fontium.woff, fontium.woff2 - 4. Specify a location for fontium.min.css file as follows.
- < link rel = "stylesheet" type = "text/css" href = "/common/fontium/css/fontium.css" />
- 5. Apply Fountium into the project easily using Search Fontium icons.
Fontium Download
Basic Icons
- fonti um-fontium-logo
- Although some uses <i> tag for brevity of code, It is accurate to use <span> tag by definition of HTML.
- < i class = "fonti um-fontium-logo" > </i> fonti um-fontium-logo
Controlling the size of the icons
- um-1x
- um-2x
- um-3x
- um-4x
- Fontium assumes a format that applies font sizes thorough <class>
-
<
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
Animation Icons
- You can use animation such as loading and so on using Fontium icons.
-
<
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>
Rotation Icons
- Basic
- um-rotate-90
- um-rotate-180
- um-rotate-270
- You can rotate icons up to 90 degrees.
-
<
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
Example of use of Bootstrap
- It is much nicer to use both of Bootstrap and Fontium icons.
-
<
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>
#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