Docs - Icon

Home / Doc / Docs - Icon

Please note that the folder named 'fonts' needs to be present inside html folder for the icons to be created as expected.

To create icon, you need to use font-awesome.css

We have provided four styles of icon list

To display the icon color styles shown below, you will have to use theme.css

  • .icons-gray - icon color gray
  • .icons-black - icon color black
  • .icons-blue - icon color blue
  • .icons-box - icon background blue

Icon Gray

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

          
    <!-- icon gray color -->
    
    <div class="col-sm-2 col-lg-2">
            <span><i class="fa fa-5x fa-user icons-gray"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div class="col-sm-2 col-lg-2">
            <span><i class="fa fa-4x fa-user icons-gray"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div class="col-sm-2 col-lg-2">
            <span><i class="fa fa-3x fa-user icons-gray"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div class="col-sm-2 col-lg-2">
            <span><i class="fa fa-2x fa-user icons-gray"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div class="col-sm-2 col-lg-2">
            <span><i class="fa fa-1x fa-user icons-gray"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
    </div>

List Icon Gray

  • Lorem ipsum dolor sit amet

  • Consectetuer adipiscing elit

  • Aenean commodo ligula eget dolor

  • Cum sociis natoque penatibus et

          
    <!-- list icon gray color -->
    
    <ul class="list-icons">
    	<li>
            <span><i class="fa fa-1x fa-user icons-gray"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
        <li>
            <span><i class="fa fa-1x fa-envelope icons-gray"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
        <li>
            <span><i class="fa fa-1x fa-pencil icons-gray"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
        <li>
            <span>class="fa fa-1x fa-photo icons-gray"</span>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
    </ul>

Icon black

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

          
    <!-- icon black color -->
    
    <div class="col-sm-2 col-lg-2">
            <span><i class="fa fa-5x fa-user icons-black"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div class="col-sm-2 col-lg-2">
            <span><i class="fa fa-4x fa-user icons-black"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div class="col-sm-2 col-lg-2">
            <span><i class="fa fa-3x fa-user icons-black"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div class="col-sm-2 col-lg-2">
            <span><i class="fa fa-2x fa-user icons-black"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div class="col-sm-2 col-lg-2">
            <span><i class="fa fa-1x fa-user icons-black"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
    </div>

List Icon black

  • Lorem ipsum dolor sit amet

  • Consectetuer adipiscing elit

  • Aenean commodo ligula eget dolor

  • Cum sociis natoque penatibus et

          
    <!-- list icon black color -->
    
    <ul class="list-icons">
    	<li>
            <span><i class="fa fa-1x fa-user icons-black"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
        <li>
            <span><i class="fa fa-1x fa-user icons-black"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
        <li>
            <span><i class="fa fa-1x fa-user icons-black"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
        <li>
            <span><i class="fa fa-1x fa-user icons-black"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
    </ul>

Icon blue

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

          
    <!-- icon blue color -->
    
    <div class="col-sm-2 col-lg-2">
            <span><i class="fa fa-5x fa-user icons-blue"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div class="col-sm-2 col-lg-2">
            <span><i class="fa fa-4x fa-user icons-blue"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div class="col-sm-2 col-lg-2">
            <span><i class="fa fa-3x fa-user icons-blue"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div class="col-sm-2 col-lg-2">
            <span><i class="fa fa-2x fa-user icons-blue"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div class="col-sm-2 col-lg-2">
            <span><i class="fa fa-1x fa-user icons-blue"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
    </div>

List Icon blue

  • Lorem ipsum dolor sit amet

  • Consectetuer adipiscing elit

  • Aenean commodo ligula eget dolor

  • Cum sociis natoque penatibus et

          
    <!-- list icon blue color -->
    
    <ul class="list-icons">
    	<li>
            <span><i class="fa fa-1x fa-user icons-blue"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
        <li>
            <span><i class="fa fa-1x fa-user icons-blue"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
        <li>
            <span><i class="fa fa-1x fa-user icons-blue"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
        <li>
            <span><i class="fa fa-1x fa-user icons-blue"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
    </ul>

Icon blue box

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

          
    <!-- icon blue color -->
    
    <div class="col-sm-2 col-lg-2">
            <span><i class="fa fa-5x fa-user icons-box icons-box-5x"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div class="col-sm-2 col-lg-2">
            <span><i class="fa fa-4x fa-user icons-box icons-box-4x"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div class="col-sm-2 col-lg-2">
            <span><i class="fa fa-3x fa-user icons-box icons-box-3x"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div class="col-sm-2 col-lg-2">
            <span><i class="fa fa-2x fa-user icons-box icons-box-2x"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div class="col-sm-2 col-lg-2">
            <span><i class="fa fa-1x fa-user icons-box"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
    </div>

List Icon blue box

  • Lorem ipsum dolor sit amet

  • Consectetuer adipiscing elit

  • Aenean commodo ligula eget dolor

  • Cum sociis natoque penatibus et

          
    <!-- list icon blue color -->
    
    <ul class="list-icons">
    	<li>
            <span><i class="fa fa-user icons-box"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
        <li>
            <span><i class="fa fa-user icons-box"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
        <li>
            <span><i class="fa fa-user icons-box"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
        <li>
            <span><i class="fa fa-user icons-box"></i></span>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
    </ul>
Top