DNG > Short Code > Icon Elements

div class="dg-ico03 size-xs bg-accent2"><i class="fa fa-magic-wand"></i><span class="bg bg-accent2"></span></div>

Icon Style 02

<div class="dg-ico03 size-sm bg-pink"><i class="fa fa-star"></i><span class="bg bg-pink"></span></div>

Icon Style 03

<div class="dg-ico03 size-lg bg-darkturquoise"><i class="fa fa-baby"></i><span class="bg bg-darkturquoise"></span></div>

Icon Style 04

<div class="dg-ico03 size-xl bg-saffron"><i class="fa fa-brain"></i><span class="bg bg-saffron"></span></div>

Icon Style 05

<div class="dg-ico03 size-xxl bg-shamrock"><i class="fa fa-palette"></i><span class="bg bg-shamrock"></span></div>

 
<div class="dg-ico-animation03 animation-out size-lg color-accent2"><i class="fa fa-palette"></i></div>

Icon-hovering Styles 02

 
<div class="dg-ico-animation03 animation-in size-lg color-pink"><i class="fa fa-cog2"></i></div>

Icon-hovering Styles 03

 
<div class="dg-ico-animation05 size-lg color-saffron"><i class="fa fa-rocket2"></i><span class="bg bg-saffron"></span></div>

Icon-hovering Styles 04

 
<div class="dg-ico-animation04 size-lg color-accent"><i class="fa fa-magic-wand"></i></div>

Icon-hovering Styles 05

 
<div class="dg-ico-animation02 animation-in size-lg color-accent"><i class="fa fa-rocket2"></i><span class="bg bg-accent"></span></div>

Icon-hovering Styles 06

 
<div class="dg-ico-animation08 size-lg color-pink"><i class="fa fa-magic-wand"></i><span class="bg bg-pink"></span></div>

Icon-hovering Styles 07

 
<div class="dg-ico-animation11 animation-in size-lg color-darkturquoise"><i class="fa fa-headphones2"></i><span class="bg bg-darkturquoise"></span></div>

Icon-hovering Styles 08

 
<div class="dg-ico-animation12 size-lg color-shamrock"><i class="fa fa-database2"></i><span class="bg bg-shamrock"></span></div>

Icon-hovering Styles 09

 
<div class="dg-ico-animation06 animation-top size-lg color-accent"><i class="fa fa-headphones2"></i><span class="bg bg-accent"></span></div>

Icon-hovering Styles 10

 
<div class="dg-ico-animation06 animation-right size-lg color-accent"><i class="fa fa-database2"></i><span class="bg bg-accent"></span></div>

Icon-hovering Styles 11

 
<div class="dg-ico-animation06 animation-bottom size-lg color-accent"><i class="fa fa-file-code"></i><span class="bg bg-accent"></span></div>

Icon-hovering Styles 12

		
 
<div class="dg-ico-animation06 animation-left size-lg color-accent"><i class="fa fa-pencil3"></i><span class="bg bg-accent"></span></div>

Icon-hovering Styles 13

 
<div class="dg-ico-animation02 animation-out size-lg color-accent"><i class="fa fa-rocket2"></i><span class="bg bg-accent"></span></div>

Icon-hovering Styles 14

 
<div class="dg-ico-animation07 size-lg border-pink"><i class="fa fa-magic-wand"></i><span class="bg bg-pink"></span></div>

Icon-hovering Styles 15

 
<div class="dg-ico-animation09 size-lg color-darkturquoise"><i class="fa fa-headphones2"></i><span class="bg bg-darkturquoise"></span></div>

Icon-hovering Styles 16

 
<div class="dg-ico-animation10 size-lg"><span class="front bg-shamrock"><i class="fa fa-database2"></i></span><span class="back color-shamrock"><i class="fa fa-database-add"></i></span></div>

<div class="row mb-30">
  <div class="col-sm-4">
    <div class="dg-iconbox07"><span class="dg-ico-svg size-sm"><i class="fa fa-cog animation icon-svg color-accent"></i></span>
      <h3 class="title">ADVANCED SETTINGS</h3>
      <p class="width-85">Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur</p>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="dg-iconbox07"><span class="dg-ico-svg size-sm"><i class="fa fa-bell animation icon-svg color-accent"></i></span>
      <h3 class="title">SMART & EFFECTIVE</h3>
      <p class="width-85">Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur</p>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="dg-iconbox07"><span class="dg-ico-svg size-sm"><i class="fa fa-dashboard animation icon-svg color-accent"></i></span>
      <h3 class="title">IMAGINE AND CREATE</h3>
      <p class="width-85">Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur</p>
    </div>
  </div>
</div>

Icon Animation 02

<div class="row animation">
  <div class="col-sm-4">
    <div class="dg-iconbox01"><span class="dg-ico03 size-xl bg-shamrock flipInY animation_item"><i class="fa fa-hdd-down"></i></span>
      <h3 class="title delay1 fadeInUp animation_item">ADVANCED SETTINGS</h3>
      <p class="width-85 delay2 fadeInUp animation_item">Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur</p>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="dg-iconbox01"><span class="dg-ico03 size-xl bg-accent2 flipInY delay3 animation_item"><i class="fa fa-map-marker2"></i></span>
      <h3 class="title delay4 fadeInUp animation_item">SMART & EFFECTIVE</h3>
      <p class="width-85 delay5 fadeInUp animation_item">Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur</p>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="dg-iconbox01"><span class="dg-ico03 size-xl bg-darkturquoise flipInY delay6 animation_item"><i class="fa fa-star2"></i></span>
      <h3 class="title delay7 fadeInUp animation_item">IMAGINE AND CREATE</h3>
      <p class="width-85 delay8 fadeInUp animation_item">Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur</p>
    </div>
  </div>
</div>

Portfolio List

Grid Layout

Packery Layout

Portfolio Details

Masonry Layout

Icon Elements

Different Icon

Different Icon Styles

Different Icon-hovering Styles

Icon Animation

ADVANCED SETTINGS

SMART & EFFECTIVE

IMAGINE AND CREATE

ADVANCED SETTINGS

SMART & EFFECTIVE

IMAGINE AND CREATE