Icon Vergleich

by Jens Kühn

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<span class="fa-stack">
  <i class="fa fa-files-o fa-stack-2x"></i>
  <i class="fa fa-retweet fa-stack-1x fa-rotate-45"></i>
</span>

CSS

.fa-rotate-45 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.fa-stack{
    opacity: 0.6;
    width: 1.2em;
    height: 1.2em;
}
.fa-stack:hover{
    opacity: 1;
}
.fa-stack-1x{
    font-weight: bold;
    font-size: 0.8em;   
    line-height: 1.5em;
}
.fa-stack-2x{
    opacity: 0.5;
    font-size: 1.2em
}