Documentation v1.0.11

Preview Purchase

Overview

High quality custom font icon set to use in combination with any Craft 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>

Icon 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>

Icon 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
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-ethereum
fonticon-bitcoin
fonticon-setting
fonticon-headset
fonticon-play
fonticon-pause
fonticon-next
fonticon-back
fonticon-shuffle
fonticon-repeat
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation
From guides and how-tos, to live demos and code examples to get started right away.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now