Combine typicons to a set to get more variants

I would like to contribute just another example how you can use Typicons in a combination of a set of two icons. typicon-set

I searched for a solution to get more variants of icons. And with your help. providing the typicons.font I found now this solution:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Typicon Set</title>
<link href="../fontdemo/typicons.css" type="text/css" rel="stylesheet" />
<style type="text/css">
.main-icon {
    position: absolute;
    color: #333;
    font-size: 34px;
    line-height: 1em;
}

/* sub-icon can be placed with defining top, right, left, bottom */
.sub-icon {
    position: absolute;
    top: -2px;
    right: -2px;
    color: #333;
    font-size: 16px;
    line-height: 1em;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 0px;
    padding: 1px;
    background-color: #95CF5E;
    color: #fff;
}
</style>
</head>
<body>
    <p>This is an example how to combine two typicons to a set.</p>
    <a href="#"> 
        <span class="main-icon typcn typcn-document-text">
            <span class="sub-icon typcn typcn-tick"></span>
    </span>
    </a>
</body>
</html>

Maybe this is something what you can add to your HowToUse page?

stephenhutchings / typicons.font

Combine typicons to a set to get more variants #16