Admire
  • Introduction
  • Folder Structure
  • HTML
    • Introduction
    • HTML Structure
      • Header
      • Left Side Menu
      • Right Side Menu
      • Main Content
        • Buttons
        • Carousel and sliders
        • Charts
        • Icons
        • Progress Bars
        • Maps
        • Modals
        • Lock Screen
    • Plugins
    • FAQ's
    • Fonts Used
    • Start New Page
      • Black scheme
      • White scheme
    • Hide/Remove section
      • white scheme
      • Black scheme
  • Laravel Version
    • Installation
      • Previous Versions
        • Laravel 8
        • Laravel 7
        • Laravel 5.6
    • Layouts
      • default
      • Fixed header
      • Fixed menu
      • Fixed Menu Header
      • Compact Menu
    • Blank Page
    • How to change the layout
  • Updates
    • 3.x
    • 2.3
    • 2.8
    • 2.7
    • 2.2
    • 2.1
    • 2.0
    • 1.4
    • 1.3
Powered by GitBook
On this page

Was this helpful?

  1. HTML
  2. HTML Structure
  3. Main Content

Icons

PreviousChartsNextProgress Bars

Last updated 5 years ago

Was this helpful?

There are three different types of icons used in this theme

1) Font Awesome Icons :

It has the following Structure:

<a href="#">
  <i class="fa fa-phone"></i>
</a>

Icons Size - determines the size of icons, can take such values: fa-lg, fa-2x, fa-3x, fa-4x and fa-5x

<a href="#">
  <i class="fa fa-phone fa-lg"></i>
</a>

Stacked icons - It stacks the multiple icons. we can also control the size of the icons using the parameters : fa-stack-1x fa-stack-2x.

<span class="fa-stack fa-lg">
 <i class="fa fa-circle fa-stack-2x text-info"></i>
   <i class="fa fa-home fa-stack-2x fa-inverse"></i>
</span>

2) Themify Icons

It has the following Structure:

<a href="#">
  <i class="ti arrow-up"></i>
</a>

We can import our desired icon just by replacing arrow-upin the above code with the icon we want.

3) IonIcons

It has the following Structure:

<a href="#">
  <i class="ion-ionic"></i>
</a>

We can import our desired icon just by replacing ion ionicin the above code with the icon we want.