Icon Fix, Interruptibble, Both

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>Fest:</dt>
    <dd>
        <i class="fa fa-map-marker"></i>
    </dd>
    <dt>Unterbrechbar:</dt>
    <dd>
        <i class="fa fa-ellipsis-h"></i>
    </dd>
    <dt>Fest und Unterbrechbar:</dt>
    <dd>
        <i class="fa fa-map-marker-ellipsis-h"></i>
    </dd>
</dl>

CSS

.fa{
    background: #dedede;
    border: 1px solid #ababab;
    line-height: 1.25em;
    width: 1.25em;
    text-align: center;
}
.fa-ellipsis-h{
    font-size: 1.25em;
    line-height: 1em;
    width: 1em;
}

/* - Both Icon - */
.fa-map-marker-ellipsis-h{
    width: 1.25em;
    height:1.25em;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.fa-map-marker-ellipsis-h:after,
.fa-map-marker-ellipsis-h:before{
    position: absolute;
    width: 100%;
    text-align: center;
}
.fa-map-marker-ellipsis-h:after{
    top: .35em;
    left: 0em;
    line-height: 1em;
    font-size: 1.25em;
    content: "\f141";
}
.fa-map-marker-ellipsis-h:before{
    top: -.05em;
    left: 0;
    content: "\f041";    
}