Иной

Иконки на HTML и CSS

Иконки для сайта без файлов картинок на чистом HTML5 с CSS3.
[class^="icon-"]{
position:relative; dispaly:inline-block; width:48px; height:48px; opacity:0.54; float:left;
}

[class^="icon-"]::before, [class^="icon-"]::after{content:""}

[class^="icon-"]::before, [class^="icon-"] > div, [class^="icon-"]::after{
position:absolute; dispaly:block; background-color:#000; border:none;
}

<div class="icon-menu"><div></div></div>
.icon-menu::before, .icon-menu>div, .icon-menu::after{
left:15px;
width:18px; height:2px;
}

.icon-menu::before{top:18px}
.icon-menu>div{top:23px}
.icon-menu::after{top:28px}

<div class="icon-close"></div>
.icon-close::before, .icon-close::after{
left:15px; top:23px;
width:18px; height:2px;
}

.icon-close::before{transform:rotate(45deg)}
.icon-close::after{transform:rotate(-45deg)}

<div class="icon-more-vert"><div></div></div>
.icon-more-vert::before, .icon-more-vert>div, .icon-more-vert::after{
left:22px;
width:4px; height:4px;
border-radius:2px;
}
.icon-more-vert::before{top:16px}
.icon-more-vert>div{top:22px}
.icon-more-vert::after{top:28px}

<div class="icon-more-horiz"><div></div></div>
.icon-more-horiz::before, .icon-more-horiz>div, .icon-more-horiz::after{
top:22px;
width:4px;height:4px;
background-color:#000;
border-radius:2px;
}

.icon-more-horiz::before{left:16px}
.icon-more-horiz>div{left:22px}
.icon-more-horiz::after{left:28px}

<div class="icon-search"></div>
.icon-search::before{
left:15px;top:15px;
width:9px;height:9px;
background-color:transparent;
border:2px solid #000;
border-radius:50%;
}

.icon-search::after{
right:15px; bottom:18px;
width:9px; height:2px;
transform:rotate(45deg);
}

<div class="icon-check"></div>
.icon-check::before, .icon-check::after{
width:16px; height:2px;
}

.icon-check::before{
left:19px; top:23px;
transform:rotate(-45deg);
}

.icon-check::after{
left:15px; top:27px;
width:8px;
transform:rotate(47deg);
border-radius:0 0 1px 0;
}

<div class="icon-arrow-back"><div></div></div>
.icon-arrow-back::before, .icon-arrow-back>div, .icon-arrow-back::after{
left:16px; top:23px;
width:10px; height:2px;
}

.icon-arrow-back::before{
top:19px;
transform:rotate(-45deg);
}

.icon-arrow-back>div{
left:16px;
width:16px;
border-radius:1px 0 0 1px;
}

.icon-arrow-back::after{
top:27px;
transform:rotate(45deg);
}

<div class="icon-arrow-forward"><div></div></div>
.icon-arrow-forward::before, .icon-arrow-forward>div, .icon-arrow-forward::after{
left:22px; top:23px;
width:10px; height:2px;
}

.icon-arrow-forward::before{
top:19px;
transform:rotate(45deg)
}

.icon-arrow-forward>div{
left:16px;
width:16px;
border-radius:0 1px 1px 0;
}

.icon-arrow-forward::after{
top:27px;
transform:rotate(-45deg);
}
Иконки для сайта без файлов картинок на чистом HTML5 с CSS3. Продолжение следует...
#87 Тайны колдовства. Игра
магия, приключения, колдовство, тайны, онлайн