Icon Modal

by Jens Kühn

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<dl>
    <dt>Normal:</dt>
    <dd>
        <i class="fa fa-minus"></i>
        <i class="fa fa-square-o"></i>
        <i class="fa fa-times"></i>
    </dd>
    <dt>Vollbild:</dt>
    <dd>
        <i class="fa fa-minus"></i>
        <i class="fa fa-max"></i>
        <i class="fa fa-times"></i>
    </dd>
    <dt>Minimiert:</dt>
    <dd>
        <i class="fa fa-max"></i>
        <i class="fa fa-square-o"></i>
        <i class="fa fa-times"></i>
    </dd>
</dl>

CSS

.fa-times{
    font-size: 1.25em;
}
.fa-minus{
    vertical-align: sub;
}
.fa-square-o{
    font-weight: bold;
}

/* - Max Icon - */
.fa-max{
        position: relative;
      display: inline-block;
      width: 1em;
      height: 1em;
      line-height: 2em;
      vertical-align: middle;
}
.fa-max:after,
.fa-max:before{
    position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
    font: normal normal normal 14px/1 FontAwesome;
}
.fa-max:after{
    line-height: inherit;
    font-size: 0.8em;   
    line-height: 1.4em;
    content: "\f04d";
}
.fa-max:before{
    font-size: 0.8em;
    top: -.05em;
    left: .2em;
    opacity: .6;
    content: "\f04d";    
}