Logo Logo

Documentation v8.0.38

  • Icons
  • Custom Icons
Preview Downloads Purchase

Overview

High quality custom font icon set to use in combination with any Metronic elements.

Ugage

Use Bootstrap Icons with a spesific class as explained below:
<i class="fonticon-bicycle fs-2x"></i>
<i class="fonticon-gallery fs-2x"></i>
<i class="fonticon-train fs-2x"></i>
<i class="fonticon-drone fs-2x"></i>
<i class="fonticon-settings fs-2x"></i>
<i class="fonticon-user fs-2x"></i>
<i class="fonticon-location fs-2x"></i>
<i class="fonticon-pin fs-2x"></i>

Colors

The inline icons can be colored using .text-{color}class that defined with $theme-text-colorsvariable in sass/_variables.scss:
white
primary
secondary
light
success
info
warning
danger
dark
muted
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
<i class="fonticon-bicycle text-white"></i>
<i class="fonticon-bicycle text-primary"></i>
<i class="fonticon-bicycle text-secondary"></i>
<i class="fonticon-bicycle text-light"></i>
<i class="fonticon-bicycle text-success"></i>
<i class="fonticon-bicycle text-info"></i>
<i class="fonticon-bicycle text-warning"></i>
<i class="fonticon-bicycle text-danger"></i>
<i class="fonticon-bicycle text-dark"></i>
<i class="fonticon-bicycle text-muted"></i>
<i class="fonticon-bicycle text-gray-100"></i>
<i class="fonticon-bicycle text-gray-200"></i>
<i class="fonticon-bicycle text-gray-300"></i>
<i class="fonticon-bicycle text-gray-400"></i>
<i class="fonticon-bicycle text-gray-500"></i>
<i class="fonticon-bicycle text-gray-600"></i>
<i class="fonticon-bicycle text-gray-700"></i>
<i class="fonticon-bicycle text-gray-800"></i>
<i class="fonticon-bicycle text-gray-900"></i>

Sizes

The font icons can be sized using .fs-{size}class that defined with $font-sizesvariable in sass/_variables.scss
Where sizeis one of:
  • 1- sets icon size that equals to <h1>font size
  • 2- sets icon size that equals to <h2>font size
  • 3- sets icon size that equals to <h3>font size
  • 4- sets icon size that equals to <h4>font size
  • 5- sets icon size that equals to <h5>font size
  • 6- sets icon size that equals to <h6>font size
  • 7- sets icon size that equals to <h7>font size
  • 7- sets icon size that equals to 0.95 of $font-size-basewhere $font-size-base: 1rem
  • 8- sets icon size that equals to 0.85 of $font-size-basewhere $font-size-base: 1rem
  • 9- sets icon size that equals to 0.75 of $font-size-basewhere $font-size-base: 1rem
  • 10- sets icon size that equals to 0.5 of $font-size-basewhere $font-size-base: 1rem
  • base- sets icon size that equals to $font-size-basewhere $font-size-base: 1rem
  • fluid- sets icon size that equals to 100%
  • 2x- sets icon size that equals to 2 of $font-size-basewhere $font-size-base: 1rem
  • 2qx- sets icon size that equals to 2.25 of $font-size-basewhere $font-size-base: 1rem
  • 2hx- sets icon size that equals to 2.5 of $font-size-basewhere $font-size-base: 1rem
  • 2tx- sets icon size that equals to 2.75 of $font-size-basewhere $font-size-base: 1rem
  • 3x- sets icon size that equals to 3 of $font-size-basewhere $font-size-base: 1rem
  • 3qx- sets icon size that equals to 3.25 of $font-size-basewhere $font-size-base: 1rem
  • 3hx- sets icon size that equals to 3.5 of $font-size-basewhere $font-size-base: 1rem
  • 3tx- sets icon size that equals to 3.75 of $font-size-basewhere $font-size-base: 1rem
  • 4x- sets icon size that equals to 4 of $font-size-basewhere $font-size-base: 1rem
  • 4qx- sets icon size that equals to 4.25 of $font-size-basewhere $font-size-base: 1rem
  • 4hx- sets icon size that equals to 4.5 of $font-size-basewhere $font-size-base: 1rem
  • 4tx- sets icon size that equals to 4.75 of $font-size-basewhere $font-size-base: 1rem
  • 5x- sets icon size that equals to 5 of $font-size-basewhere $font-size-base: 1rem
  • 5qx- sets icon size that equals to 5.25 of $font-size-basewhere $font-size-base: 1rem
  • 5hx- sets icon size that equals to 5.5 of $font-size-basewhere $font-size-base: 1rem
  • 5tx- sets icon size that equals to 5.75 of $font-size-basewhere $font-size-base: 1rem
.fs-5x
.fs-4x
.fs-3x
.fs-2tx
.fs-2hx
.fs-2qx
.fs-2x
.fs-1
.fs-2
.fs-3
.fs-5
.fs-6
<i class="fonticon-bicycle fs-5x"></i>
<i class="fonticon-bicycle fs-4x"></i>
<i class="fonticon-bicycle fs-3x"></i>
<i class="fonticon-bicycle fs-2tx"></i>
<i class="fonticon-bicycle fs-2hx"></i>
<i class="fonticon-bicycle fs-2qx"></i>
<i class="fonticon-bicycle fs-2x"></i>
<i class="fonticon-bicycle fs-1"></i>
<i class="fonticon-bicycle fs-2"></i>
<i class="fonticon-bicycle fs-3"></i>
<i class="fonticon-bicycle fs-5"></i>
<i class="fonticon-bicycle fs-6"></i>

Icons Listing

fonticon-delivery
Usage
fonticon-bicycle
Usage
fonticon-bookmark
Usage
fonticon-like
Usage
fonticon-microphone
Usage
fonticon-location
Usage
fonticon-gallery
Usage
fonticon-share
Usage
fonticon-star
Usage
fonticon-trash-bin
Usage
fonticon-user-2
Usage
fonticon-view
Usage
fonticon-user
Usage
fonticon-pin
Usage
fonticon-chat
Usage
fonticon-home
Usage
fonticon-mail
Usage
fonticon-settings
Usage
fonticon-alignment-right
Usage
fonticon-link
Usage
fonticon-attach
Usage
fonticon-smile
Usage
fonticon-moon
Usage
fonticon-sun
Usage
fonticon-train
Usage
fonticon-eclipse
Usage
fonticon-drone
Usage
fonticon-truck
Usage
fonticon-ship
Usage
fonticon-offline
Usage
fonticon-printer
Usage
fonticon-paperclip
Usage
fonticon-attachments
Usage
fonticon-attachment
Usage
fonticon-dogecoin
Usage
fonticon-bitcoin
Usage
fonticon-setting
Usage
fonticon-headset
Usage
fonticon-play
Usage
fonticon-pause
Usage
fonticon-next
Usage
fonticon-back
Usage
fonticon-shuffle
Usage
fonticon-repeat
Usage
fonticon-outgoing-call
Usage
fonticon-incoming-call
Usage
fonticon-cash-payment
Usage
fonticon-mobile-payment
Usage
fonticon-card-payment
Usage
fonticon-card
Usage