Documentation v8.1.7

Downloads Preview

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-colors variable 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-sizes variable in sass/_variables.scss
Where size is 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-base where $font-size-base: 1rem
  • 8 - sets icon size that equals to 0.85 of $font-size-base where $font-size-base: 1rem
  • 9 - sets icon size that equals to 0.75 of $font-size-base where $font-size-base: 1rem
  • 10 - sets icon size that equals to 0.5 of $font-size-base where $font-size-base: 1rem
  • base - sets icon size that equals to $font-size-base where $font-size-base: 1rem
  • fluid - sets icon size that equals to 100%
  • 2x - sets icon size that equals to 2 of $font-size-base where $font-size-base: 1rem
  • 2qx - sets icon size that equals to 2.25 of $font-size-base where $font-size-base: 1rem
  • 2hx - sets icon size that equals to 2.5 of $font-size-base where $font-size-base: 1rem
  • 2tx - sets icon size that equals to 2.75 of $font-size-base where $font-size-base: 1rem
  • 3x - sets icon size that equals to 3 of $font-size-base where $font-size-base: 1rem
  • 3qx - sets icon size that equals to 3.25 of $font-size-base where $font-size-base: 1rem
  • 3hx - sets icon size that equals to 3.5 of $font-size-base where $font-size-base: 1rem
  • 3tx - sets icon size that equals to 3.75 of $font-size-base where $font-size-base: 1rem
  • 4x - sets icon size that equals to 4 of $font-size-base where $font-size-base: 1rem
  • 4qx - sets icon size that equals to 4.25 of $font-size-base where $font-size-base: 1rem
  • 4hx - sets icon size that equals to 4.5 of $font-size-base where $font-size-base: 1rem
  • 4tx - sets icon size that equals to 4.75 of $font-size-base where $font-size-base: 1rem
  • 5x - sets icon size that equals to 5 of $font-size-base where $font-size-base: 1rem
  • 5qx - sets icon size that equals to 5.25 of $font-size-base where $font-size-base: 1rem
  • 5hx - sets icon size that equals to 5.5 of $font-size-base where $font-size-base: 1rem
  • 5tx - sets icon size that equals to 5.75 of $font-size-base where $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
fonticon-bicycle
fonticon-bookmark
fonticon-like
fonticon-microphone
fonticon-location
fonticon-gallery
fonticon-share
fonticon-star
fonticon-trash-bin
fonticon-user-2
fonticon-view
fonticon-user
fonticon-pin
fonticon-chat
fonticon-home
fonticon-mail
fonticon-settings
fonticon-alignment-right
fonticon-link
fonticon-attach
fonticon-smile
fonticon-moon
fonticon-sun
fonticon-train
fonticon-eclipse
fonticon-drone
fonticon-truck
fonticon-ship
fonticon-offline
fonticon-printer
fonticon-paperclip
fonticon-attachments
fonticon-attachment
fonticon-dogecoin
fonticon-bitcoin
fonticon-setting
fonticon-headset
fonticon-play
fonticon-pause
fonticon-next
fonticon-back
fonticon-shuffle
fonticon-repeat
fonticon-outgoing-call
fonticon-incoming-call
fonticon-cash-payment
fonticon-mobile-payment
fonticon-card
fonticon-like-1
fonticon-bank
fonticon-telegram
fonticon-drive
fonticon-remote-control
fonticon-house
fonticon-image
fonticon-app-store
fonticon-email
fonticon-stats
fonticon-notification
fonticon-send
fonticon-insurance
fonticon-hourglass
fonticon-calendar
fonticon-alarm
fonticon-layers
fonticon-facebook
fonticon-instagram
fonticon-linkedin
fonticon-globe
fonticon-equalizer
fonticon-settings-1
fonticon-creativity
fonticon-content-marketing
fonticon-line-chart
fonticon-cms
fonticon-hello
fonticon-password
fonticon-credit-card
fonticon-enlarge
fonticon-24-hours
fonticon-heart
fonticon-user-experience
fonticon-web-design
fonticon-sun-1
fonticon-sun-2
fonticon-messenger
Preview Get Help Buy Now