Icon 2 Export-list

by Jens Kühn

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<dl class="dl-horizontal">
    <dt>Normal:</dt>
    <dd>
        <span class="fa-stack">
          <i class="fa fa-list-ul fa-stack-2x"></i>
          <i class="fa fa-plus fa-stack-1x"></i>
        </span>
    </dd>
    <dt>Added:</dt>
    <dd>
        <span class="fa-stack">
           <i class="fa fa-list-ul fa-stack-2x"></i>
          <i class="fa fa-check fa-stack-1x"></i>
        </span>
    </dd>
</dl>

CSS

.fa-stack{
    width: 1.2em;
    height: 1.2em;
}
.fa-stack-1x{
    font-size: 1em;   
    line-height: 1.2em;
    left:.7em;
    top: -.4em;
}
.fa-stack-2x{
    opacity: 0.8;
    font-size: 1.2em
}

.fa-stack .fa-check,
.fa-stack:hover .fa-plus{
    color: #198764;
}
.fa-stack:hover .fa-stack-2x{
    opacity: 0.4;
}
.fa-stack:hover .fa-check{
    color: #b94a48;
}
.fa-stack:hover .fa-check:before {
  content: "\f00d";
}