Evil icons test

by SerGen

HTML

<script src="http://cdn.jsdelivr.net/evil-icons/1.5.0/evil-icons.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/evil-icons/1.5.0/evil-icons.min.css">
<h2>По умолчанию</h2>
<div data-icon="ei-calendar"></div>

<div class="methods">
    <div class="cal">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50"><path d="M37 38H13c-1.7 0-3-1.3-3-3V13c0-1.7 1.1-3 2.5-3H14v2h-1.5c-.2 0-.5.4-.5 1v22c0 .6.4 1 1 1h24c.6 0 1-.4 1-1V13c0-.6-.3-1-.5-1H36v-2h1.5c1.4 0 2.5 1.3 2.5 3v22c0 1.7-1.3 3-3 3z"/><path d="M17 14c-.6 0-1-.4-1-1V9c0-.6.4-1 1-1s1 .4 1 1v4c0 .6-.4 1-1 1z"/><path d="M33 14c-.6 0-1-.4-1-1V9c0-.6.4-1 1-1s1 .4 1 1v4c0 .6-.4 1-1 1z"/><path d="M20 10h10v2H20z"/><path d="M12 16h26v2H12z"/><path d="M34 20h2v2h-2z"/><path d="M30 20h2v2h-2z"/><path d="M26 20h2v2h-2z"/><path d="M22 20h2v2h-2z"/><path d="M18 20h2v2h-2z"/><path d="M34 24h2v2h-2z"/><path d="M30 24h2v2h-2z"/><path d="M26 24h2v2h-2z"/><path d="M22 24h2v2h-2z"/><path d="M18 24h2v2h-2z"/><path d="M14 24h2v2h-2z"/><path d="M34 28h2v2h-2z"/><path d="M30 28h2v2h-2z"/><path d="M26 28h2v2h-2z"/><path d="M22 28h2v2h-2z"/><path d="M18 28h2v2h-2z"/><path d="M14 28h2v2h-2z"/><path d="M30 32h2v2h-2z"/><path d="M26 32h2v2h-2z"/><path d="M22 32h2v2h-2z"/><path d="M18 32h2v2h-2z"/><path d="M14 32h2v2h-2z"/></svg>
    </div>    
    <div class="cal cal--css"></div>    
    <div class="cal cal--data"></div>
    <div class="cal cal--font"></div>
</div>

<h2>С мерами по улучшению чёткости</h2>

<div class="cals--crisp">
    <div data-icon="ei-calendar"></div>
    
    <div class="methods">
        <div class="cal">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50"><path d="M37 38H13c-1.7 0-3-1.3-3-3V13c0-1.7 1.1-3 2.5-3H14v2h-1.5c-.2 0-.5.4-.5 1v22c0 .6.4 1 1 1h24c.6 0 1-.4 1-1V13c0-.6-.3-1-.5-1H36v-2h1.5c1.4 0 2.5 1.3 2.5 3v22c0 1.7-1.3 3-3 3z"/><path d="M17 14c-.6 0-1-.4-1-1V9c0-.6.4-1 1-1s1 .4 1...

CSS

body {
    font-family: 'Segoe UI', sans-serif;
    margin: 1em;
}
h2 {
    font-weight: bold;
    margin-bottom: 1em;
}
div + h2 {
    margin-top: 1.5em;
}

.cal {
    display: inline-block;
    font-size: 25px;
    width: 25px;
    height: 25px;
}
.cals--crisp .cal svg,
.cals--crisp .icon__cnt {
        transform: translateX(0);
    -ms-transform: translate(.5px, -.3px);
}
.cals--crisp .cal--font {
    transform: translateX(.3px); /* IE */
    -webkit-transform: translateX(.9px); /* Chrome, Opera 12 */
       -moz-transform: translateX(.9px); /* FF */
}

.cal--css {
    background-image:...