Icon Boxes

---

• Components

  • Headers
  • Footers
  • Parallax
  • Cards
  • Masonry Grid
  • Buttons
  • Form Elements
  • Carousel
  • Video Pop-up
  • Floating Divs
  • Overlays
  • Zoom Effect
  • Hover Animate
  • Morphext
  • Background
  • Hover Up
  • Blockquote
  • Pagination
  • Map
  • Accordions
  • Circle Block
  • Artworks
  • Spinners
  • Icon Boxes
  • Counters
  • Progress Bars
  • Helper Classes

• Plugins

  • Animations
  • Bootstrap
  • jQuery
  • Masonry
  • Morphext
  • Owl Carousel
  • Parallax
  • Wow
  • Progress Bar
  • ImagesLoaded
  • Popper
  • Waypoints
  • jQuery Forms
  • Google reCaptcha v2

---

Simple Icon Box

Use .cl-font-40 class to make icon size consistent throughout the website.

<div class="cl-font-40">
    <i class="lni-emoji-smile"></i>
</div>

---

Rounded Icon Box

Some examples of rounded icon boxes:

<div class="cl-font-40 cl-text-color-4 cl-bg-color-2 p-3 d-inline-flex align-items-center justify-content-between rounded">
    <i class="lni-emoji-smile"></i>
</div>

<div class="cl-font-40 cl-text-color-1 cl-bg-color-2 p-3 d-inline-flex align-items-center justify-content-between rounded">
    <i class="lni-emoji-smile"></i>
</div>

<div class="cl-font-40 cl-text-color-3 cl-bg-color-4 p-3 d-inline-flex align-items-center justify-content-between rounded">
    <i class="lni-emoji-smile"></i>
</div>

<div class="cl-font-40 cl-text-color-4 cl-bg-color-2 p-3 d-inline-flex align-items-center justify-content-between card rounded">
    <i class="lni-emoji-smile"></i>
</div>

<div class="cl-font-40 cl-text-color-4 cl-bg-color-4-o4 p-3 d-inline-flex align-items-center justify-content-between card rounded">
    <i class="lni-emoji-smile"></i>
</div>

<div class="cl-font-40 cl-text-color-3 cl-bg-color-1 p-2 d-inline-flex align-items-center justify-content-between rounded-circle">
    <i class="lni-emoji-smile"></i>
</div>

<div class="cl-font-40 cl-text-color-3 cl-bg-color-4 p-2 d-inline-flex align-items-center justify-content-between rounded-circle">
    <i class="lni-emoji-smile"></i>
</div>

---

Connection Icon Box

Use .cl-icon-connection class to make icon connection container and .cl-round-icon-wrapper class for holding the icon. Add .cl-last to the last .cl-icon-connection item to tell it to stop making connection to the next item.

<div class="row text-center">

    <div class="col-md-6 col-lg-3 cl-hover mb-5 mb-lg-0">

        <div class="cl-icon-connection">
            <div class="cl-round-icon-wrapper"><i class="lni-emoji-smile"></i></div>
        </div>

    </div> <!-- Column ends -->

    <div class="col-md-6 col-lg-3 cl-hover mb-5 mb-lg-0">

        <div class="cl-icon-connection">
            <div class="cl-round-icon-wrapper"><i class="lni-emoji-smile"></i></div>
        </div>

    </div> <!-- Column ends -->

    <div class="col-md-6 col-lg-3 cl-hover mb-5 mb-md-0">

        <div class="cl-icon-connection">
            <div class="cl-round-icon-wrapper"><i class="lni-emoji-smile"></i></div>
        </div>

    </div> <!-- Column ends -->

    <div class="col-md-6 col-lg-3 cl-hover">

        <div class="cl-icon-connection cl-last">
            <div class="cl-round-icon-wrapper"><i class="lni-emoji-smile"></i></div>
        </div>

    </div> <!-- Column ends -->

</div>