clear
  • Introduction
  • HTML
  • Html Structure
    • Header
    • Left Side Menu
    • Right Side Menu
    • Main Content
      • Buttons
      • Font Icons
      • Progress Bars
      • Maps
      • Lock Screen
  • FAQ's
  • SCSS
  • CSS Files
  • Javascript Files
  • Plugins
  • Start New Page
    • Menu Bar Fold
    • Boxed and Moveable Header
    • Moveable Header
    • Boxed and Fixed Header
    • Fixed Header and Menu
  • Vue Version
    • Basic Installation
      • Clear 1.7 installation
    • Basic Structure
      • Layout structure
      • Leftmenu structure
      • Start New Page
      • Changing layouts
  • Changing Color Scheme
  • Laravel Spark Skin
    • Spark Installation
    • Using .vue files
    • Adding External Plugins
  • Laravel Version
    • Changing skin
    • Changing Layouts
Powered by GitBook
On this page

Was this helpful?

  1. Html Structure
  2. Main Content

Font Icons

PreviousButtonsNextProgress Bars

Last updated 5 years ago

Was this helpful?

There are four different types of icons included in this theme. In this page we gave an option for maximizing the size of a font and upon a click, the font gets copied to the clipboard and can be pasted anywhere. We can see the demo for this in the page. of this Template.

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) Glyphicons

It has the following Structure:

<li>
  <span class="glyphicon glyphicon-cloud-download"> </span>
  <span class="glyphicon-class">glyphicon glyphicon-cloud-download</span> 
</li>

We can import our desired icon just by replacing glyphicon-cloud-download in the above code with the icon we really need.

4) Simple Line Icons

It has the following Structure:

<div class="preview">
    <i class="icon-user icons"></i>
    <span class="name">user</span>
</div>
Font Icons