PureCSS Icons Sets
Monday 16th, Nov, 2020 | # # # #
Hi Friends Check this great collection of PureCSS Icons Set that you can use in your webs. You can copy and paste from owr code editor (Press Editor). With Pure CSS and HTML you can create cool and fast icons, without extra Javascript or Icon Font.
PureCSS Iconset CSS/HTML code
Pure CSS Icons SET 1
a.icon {
margin: 12px;
}
/* Icon Base Styles */
a.icon {
background-color: #fed;
border: 2px solid #fc6;
display: inline-block;
position: relative;
vertical-align: top;
}
a.icon:after,
a.icon:before {
background: #fed;
border: 2px solid #fc6;
content: '';
position: absolute;
}
a.icon:hover,
a.icon:hover:after,
a.icon:hover:before {
background-color: #ffe;
}
/* New Document Icon */
a.newDoc {
border-top: 2px solid #fc6;
box-shadow: inset 0 0 0 2px #fed;
height: 15px;
top: 10px;
width: 20px;
}
a.newDoc:hover {
box-shadow: inset 0 0 0 2px #ffe;
}
a.newDoc:after {
height: 10px;
right: 1px;
top: -9px;
width: 10px;
z-index: -1;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
a.newDoc:before {
border-bottom: none;
border-right: 2px solid #fc6;
height: 10px;
left: -2px;
top: -12px;
width: 11px;
}
/* Previous Icon */
a.prev {
border-radius: 100%;
height: 26px;
width: 26px;
}
a.prev:after,
a.prev:before {
border-radius: 2px;
height: 0;
left: 5px;
width: 9px;
}
a.prev:after {
bottom: 8px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
a.prev:before {
top: 8px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Next Icon */
a.next {
border-radius: 100%;
height: 26px;
width: 26px;
}
a.next:after,
a.next:before {
border-radius: 2px;
height: 0;
right: 5px;
width: 9px;
}
a.next:after {
top: 8px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
a.next:before {
bottom: 8px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Mail Icon */
a.mail {
height: 20px;
top: 4px;
width: 28px;
}
a.mail:after,
a.mail:before {
border-top: none;
top: 6px;
width: 13px;
}
a.mail:after {
left: -2px;
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-ms-transform: rotate(25deg);
-o-transform: rotate(25deg);
transform: rotate(25deg);
}
a.mail:before {
right: -2px;
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
transform: rotate(-25deg);
}
/* Contacts Icon */
a.contacts {
border-left-width: 6px;
color: #fc6;
font: bold 12px/1 sans-serif;
height: 25px;
text-decoration: none;
width: 18px;
}
a.contacts:after,
a.contacts:before {
border: none;
}
a.contacts:after {
content: '@';
right: 3px;
top: 5px;
}
/* Chart Icon */
a.chart {
height: 20px;
margin-right: 30px;
top:5px;
width: 4px;
}
a.chart:after,
a.chart:before {
bottom: -2px;
width: 4px;
}
a.chart:after {
height: 25px;
left: 8px;
}
a.chart:before {
height: 15px;
left: 18px;
}
/* Clock Icon */
a.clock {
border-radius: 100%;
height: 26px;
width: 26px;
}
a.clock:after,
a.clock:before {
border-left: none;
width: 0;
}
a.clock:after {
height: 9px;
left: 12px;
top: 3px;
}
a.clock:before {
height: 4px;
left: 15px;
top: 8px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Calendar Icon */
a.calendar {
height: 23px;
top: 2px;
width: 27px;
}
a.calendar:after {
bottom: 19px;
left: -2px;
right: -2px;
top: -2px;
}
a.calendar:before {
background: none;
border-bottom: none;
border-top: none;
border-width: 4px;
bottom: 23px;
left: 2px;
right: 2px;
top: -4px;
}
a.calendar:hover:before {
background: none;
}
/* Folder Icon */
a.folder {
height: 18px;
top: 6px;
width: 27px;
}
a.folder:after {
border-bottom: none;
border-radius: 3px 3px 0 0;
height: 3px;
left: 1px;
top: -5px;
width: 10px;
}
a.folder:before {
border: none;
}
/* Add Icon */
a.add {
border-radius: 100%;
height: 26px;
width: 26px;
}
a.add:after {
height: 16px;
left: 11px;
top: 3px;
width: 0;
}
a.add:before {
height: 0;
left: 3px;
top: 11px;
width: 16px;
}
/* Subtract Icon */
a.subtract {
border-radius: 100%;
height: 26px;
width: 26px;
}
a.subtract:after {
height: 0;
left: 3px;
top: 11px;
width: 16px;
}
a.subtract:before {
border: none;
}
/* Full Battery Icon */
a.batFull {
height: 22px;
margin-left: 18px;
margin-right: 18px;
top: 3px;
width: 8px;
}
a.batFull:after {
bottom: 2px;
left: 2px;
right: 2px;
top: 2px;
}
a.batFull:before {
height: 0;
left: 1px;
right: 1px;
top: -4px;
}
/* Empty Battery Icon */
a.batEmpty {
height: 22px;
margin-left: 18px;
margin-right: 18px;
top: 3px;
width: 8px;
}
a.batEmpty:after {
bottom: 2px;
left: 2px;
right: 2px;
top: 16px;
}
a.batEmpty:before {
height: 0;
left: 1px;
right: 1px;
top: -4px;
}
/* Tick Icon */
a.tick {
border-radius: 100%;
height: 26px;
width: 26px;
}
a.tick:after {
height: 14px;
left: 13px;
top: 5px;
width: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
a.tick:before {
height: 0;
left: 4px;
top: 14px;
width: 2px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Cross Icon */
a.cross {
border-radius: 100%;
height: 26px;
width: 26px;
}
a.cross:after {
height: 0;
left: 3px;
top: 11px;
width: 16px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
a.cross:before {
height: 0;
left: 3px;
top: 11px;
width: 16px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Eject Icon */
a.eject {
height: 4px;
top: 20px;
width: 26px;
}
a.eject:after,
a.eject:before,
a.eject:hover:after,
a.eject:hover:before {
background: none;
}
a.eject:after {
border-bottom: 15px solid #fc6;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid transparent;
height: 0;
left: -2px;
top: -35px;
width: 0;
}
a.eject:before {
border-bottom: 10px solid #fed;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
height: 0;
left: 3px;
top: -27px;
width: 0;
z-index: 1;
}
a.eject:hover:before {
border-bottom-color: #ffe;
}
/* User Icon */
a.user {
border-radius: 10px 10px 0 0;
height: 6px;
top: 19px;
width: 26px;
}
a.user:after {
border-radius: 10px;
height: 17px;
left: 4px;
top: -20px;
width: 14px;
}
a.user:before {
border: none;
height: 10px;
left: 9px;
top: -9px;
width: 8px;
z-index: 1;
}
/* Heart Icon */
a.heart {
border-radius: 100%;
height: 15px;
margin-right: 24px;
width: 15px;
}
a.heart:after {
border-radius: 100%;
height: 15px;
left: 11px;
top: -2px;
width: 15px;
z-index: -1;
}
a.heart:before {
border-left: none;
border-top: none;
height: 16px;
left: 5px;
top: 6px;
width: 16px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Play Icon */
a.play {
border-radius: 100%;
height: 26px;
width: 26px;
}
a.play:after,
a.play:before,
a.play:hover:after,
a.play:hover:before {
background: none;
}
a.play:after {
border-bottom: 8px solid transparent;
border-left: 13px solid #fc6;
border-right: 13px solid transparent;
border-top: 8px solid transparent;
height: 0;
left: 8px;
top: 5px;
width: 0;
}
a.play:before {
border: none;
}
/* Pause Icon */
a.pause {
border-radius: 100%;
height: 26px;
width: 26px;
}
a.pause:after,
a.pause:before {
height: 10px;
top: 6px;
width: 0;
}
a.pause:after {
left: 7px;
}
a.pause:before {
left: 15px;
}
/* Stop Icon */
a.stop {
border-radius: 100%;
height: 26px;
width: 26px;
}
a.stop:after {
background: #fc6;
height: 9px;
left: 7px;
top: 7px;
width: 8px;
}
a.stop:hover:after {
background: #fc6;
}
a.stop:before {
border: none;
}
/* Flag Icon */
a.flag {
height: 25px;
margin-right: 35px;
width: 0;
}
a.flag:after,
a.flag:before {
height: 8px;
left: 0;
top: -2px;
width: 10px;
}
a.flag:before {
left: 6px;
top: 2px;
}
/* Home Icon */
a.home {
height: 10px;
top: 14px;
width: 20px;
}
a.home:after,
a.home:before,
a.home:hover:after,
a.home:hover:before {
background: none;
}
a.home:after {
border-bottom: 15px solid #fc6;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-top: 15px solid transparent;
height: 0;
left: -6px;
top: -29px;
width: 0;
}
a.home:before {
border-bottom: 10px solid #fed;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-top: 10px solid transparent;
height: 0;
left: -1px;
top: -21px;
width: 0;
z-index: 1;
}
a.home:hover:before {
border-bottom-color: #ffe;
}
/* Comment Icon */
a.comment {
border-radius: 4px;
height: 18px;
width: 26px;
}
a.comment:after,
a.comment:before {
background: none;
border-bottom: 6px solid transparent;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #fc6;
bottom: -14px;
height: 0;
left: 7px;
width: 0;
}
a.comment:before {
border-top-color: #fed;
bottom: -11px;
z-index: 1;
}
a.comment:hover:after {
background: none;
}
a.comment:hover:before {
background: none;
border-top-color: #ffe;
}
<a class="folder icon" title="Folder" href="#"></a> <a class="newDoc icon" title="New Document" href="#"></a> <a class="mail icon" title="Mail" href="#"></a> <a class="contacts icon" title="Contacts" href="#"></a> <a class="calendar icon" title="Calendar" href="#"></a> <a class="clock icon" title="Clock" href="#"></a> <a class="chart icon" title="Chart" href="#"></a> <a class="prev icon" title="Previous" href="#"></a> <a class="next icon" title="Next" href="#"></a> <a class="flag icon" title="Flag" href="#"></a> <a class="add icon" title="Add" href="#"></a> <a class="subtract icon" title="Subtract" href="#"></a> <a class="tick icon" title="Tick" href="#"></a> <a class="cross icon" title="Cross" href="#"></a> <a class="user icon" title="User" href="#"></a> <a class="comment icon" title="Comment" href="#"></a> <a class="heart icon" title="Heart" href="#"></a> <a class="home icon" title="Home" href="#"></a> <a class="batFull icon" title="Full Battery" href="#"></a> <a class="batEmpty icon" title="Empty Battery" href="#"></a> <a class="play icon" title="Play" href="#"></a> <a class="pause icon" title="Pause" href="#"></a> <a class="stop icon" title="Stop" href="#"></a> <a class="eject icon" title="Eject" href="#"></a>
Pure CSS IOS Animated
.main-container {
max-width: 885px;
display: -webkit-box;
display: flex;
flex-wrap: wrap;
margin: 20px auto 50px auto;
}
.container {
margin: 0 auto;
}
.icon-container {
margin: 20px auto;
width: 200px;
height: 200px;
border-radius: 20%;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: end;
align-items: flex-end;
background-color: #ececec;
position: relative;
}
.bar {
display: inline-block;
height: 50px;
width: 50px;
background-color: #F7CA18;
border-radius: 20% 20% 0 0;
margin-bottom: 20px;
}
.bar-left {
border-radius: 10px 0 0 10px;
}
.bar-middle {
height: 100px;
border-radius: 10px 0 0 0;
z-index: 1;
}
.bar-right {
background-color: #F27935;
height: 150px;
border-radius: 10px 10px 10px 0;
overflow: hidden;
}
h1, h2 {
color: white;
text-align: center;
margin: 0;
padding: 0;
font-weight: 300;
}
.envelope {
background-color: #3267D5;
width: 150px;
height: 90px;
margin: 0 auto 20px auto;
border-top: 2px solid #ECECEC;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.envelope .envelope-left {
width: 0;
height: 0;
border-style: solid;
border-width: 0 135px 85px 0;
border-color: transparent transparent #2AB6F6 transparent;
position: absolute;
left: 0;
bottom: 0;
}
.envelope .envelope-right {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 85px 135px;
border-color: transparent transparent #81D2F9 transparent;
position: absolute;
right: 0;
bottom: 0;
}
.envelope-content {
width: 35px;
height: 10px;
background-color: #E0E0E0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
left: 75px;
top: 90px;
z-index: 1;
-webkit-animation: display 6s linear infinite;
animation: display 6s linear infinite;
opacity: 0;
}
.envelope-content::after {
content: "";
width: 200%;
height: 100%;
background-color: #E0E0E0;
position: absolute;
left: -5px;
bottom: 30px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
@-webkit-keyframes display {
0%, 20% {
opacity: 0;
top: 160px;
}
20%,50% {
opacity: 0;
}
55%, 100% {
opacity: 1;
top: 90px;
}
}
@keyframes display {
0%, 20% {
opacity: 0;
top: 160px;
}
20%,50% {
opacity: 0;
}
55%, 100% {
opacity: 1;
top: 90px;
}
}
.envelope-top {
width: 0;
height: 0;
border-style: solid;
border-width: 0 75px 55px 75px;
border-color: transparent transparent #2A55C5 transparent;
position: absolute;
top: 40px;
-webkit-animation: flip 6s linear infinite;
animation: flip 6s linear infinite;
-webkit-perspective: 500px;
perspective: 500px;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
@-webkit-keyframes flip {
0%, 60% {
-webkit-transform: rotate3d(1, 0, 0, 180deg);
transform: rotate3d(1, 0, 0, 180deg);
}
60%,100% {
-webkit-transform: rotate3d(1, 0, 0, 0deg);
transform: rotate3d(1, 0, 0, 0deg);
}
}
@keyframes flip {
0%, 60% {
-webkit-transform: rotate3d(1, 0, 0, 180deg);
transform: rotate3d(1, 0, 0, 180deg);
}
60%,100% {
-webkit-transform: rotate3d(1, 0, 0, 0deg);
transform: rotate3d(1, 0, 0, 0deg);
}
}
.trapezoid {
height: 40px;
width: 75px;
}
.trapezoid-yellow {
background-color: #FFCF61;
-webkit-transform: rotate(90deg) skewY(-30deg);
transform: rotate(90deg) skewY(-30deg);
position: absolute;
top: 65px;
left: 85px;
z-index: 1;
}
.trapezoid-blue {
background-color: #3777E2;
-webkit-transform: rotate(30deg) skewY(-30deg);
transform: rotate(30deg) skewY(-30deg);
position: absolute;
bottom: 40px;
left: 72px;
z-index: 2;
}
.trapezoid-green {
background-color: #10A860;
-webkit-transform: rotate(-30deg) skewY(-30deg);
transform: rotate(-30deg) skewY(-30deg);
position: absolute;
top: 82px;
left: 31px;
}
.trapezoid-green::after {
content: "";
border-left: 20px solid transparent;
border-right: 20px solid transparent;
width: 100%;
height: 100%;
z-index: 3;
position: absolute;
top: 50px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.weather {
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #008DEA), to(#00F9F9));
background: linear-gradient(#008DEA 30%, #00F9F9);
}
.sun {
background-color: #FFD24A;
width: 75px;
height: 75px;
border-radius: 50%;
position: absolute;
top: 35px;
left: 30px;
}
.dots {
width: 85px;
height: 75px;
background-color: #E2F9FE;
opacity: 0.95;
border-radius: 50%;
position: absolute;
top: 60px;
left: 65px;
}
.dots::before, .dots::after {
content: "";
background-color: #E2F9FE;
opacity: 0.95;
position: absolute;
border-radius: 50%;
}
.dots::before {
width: 70%;
height: 70%;
top: 30px;
left: -20px;
border-radius: 50px;
}
.dots::after {
width: 90%;
height: 90%;
top: 15px;
left: 30px;
border-radius: 50px;
}
.box {
width: 50px;
height: 20px;
background-color: #E2F9FE;
opacity: 0.95;
position: absolute;
top: 63px;
left: 10px;
}
.newspaper {
background-color: #C93BDD;
width: 100px;
height: 100px;
position: absolute;
left: -10px;
}
.photo-rectangle {
width: 45px;
height: 75px;
border-radius: 50px;
position: absolute;
top: 20px;
}
.photo-rectangle.orange {
background-color: rgba(243, 156, 18, 0.7);
z-index: 1;
}
.photo-rectangle.yellow {
background-color: rgba(241, 196, 15, 0.7);
-webkit-transform-origin: 55% 100%;
transform-origin: 55% 100%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.photo-rectangle.green {
background-color: rgba(46, 204, 113, 0.7);
-webkit-transform-origin: 55% 105%;
transform-origin: 55% 105%;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.photo-rectangle.lightBlue {
background-color: rgba(27, 188, 155, 0.7);
-webkit-transform-origin: 52.5% 105%;
transform-origin: 52.5% 105%;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.photo-rectangle.blue {
background-color: rgba(65, 131, 215, 0.7);
-webkit-transform-origin: 50% 105%;
transform-origin: 50% 105%;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.photo-rectangle.purple {
background-color: rgba(102, 51, 153, 0.7);
-webkit-transform-origin: 47.5% 105%;
transform-origin: 47.5% 105%;
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.photo-rectangle.violet {
background-color: rgba(155, 89, 182, 0.7);
-webkit-transform-origin: 45% 105%;
transform-origin: 45% 105%;
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.photo-rectangle.red {
background-color: rgba(242, 38, 19, 0.7);
-webkit-transform-origin: 45% 102.5%;
transform-origin: 45% 102.5%;
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
.firstRing {
display: block;
width: 160px;
height: 160px;
background-color: #2F883E;
border-radius: 50%;
border: 6px solid black;
position: absolute;
top: 15px;
left: 15px;
overflow: hidden;
}
.secondRing {
width: 150px;
height: 154px;
background-color: transparent;
border: 3px solid #44ff4e;
border-radius: 50%;
margin: 0 auto;
vertical-align: middle;
overflow: hidden;
}
.thirdRing {
width: 100px;
height: 100px;
background-color: transparent;
border: 3px solid #44ff4e;
border-radius: 50%;
margin: 0 auto;
vertical-align: middle;
position: absolute;
top: 30px;
left: 27.5px;
}
.fourthRing {
width: 30px;
height: 30px;
background-color: transparent;
border: 3px solid #44ff4e;
border-radius: 50%;
margin: 0 auto;
vertical-align: middle;
position: absolute;
top: 32px;
left: 32px;
}
.scan {
width: 85px;
height: 85px;
margin: 0 auto;
vertical-align: middle;
position: absolute;
top: 15px;
left: 15px;
overflow: hidden;
background: -webkit-gradient(linear, left bottom, left top, from(#44ff4e), color-stop(10%, #44ff4e), to(transparent));
background: linear-gradient(0deg, #44ff4e, #44ff4e 10%, transparent);
-webkit-animation: rotate 2s linear infinite;
animation: rotate 2s linear infinite;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.podcast {
background: -webkit-gradient(linear, left top, left bottom, from(#D46DFB), to(#842CC2));
background: linear-gradient(#D46DFB, #842CC2);
}
.podcast-outerRing {
border: 10px solid;
border-color: white white transparent white;
border-radius: 50%;
width: 115px;
height: 115px;
margin: auto;
background-color: transparent;
position: relative;
}
.podcast-innerRing {
width: 70px;
height: 70px;
border-radius: 50%;
border: 10px solid;
border-color: white white transparent white;
margin: 12px auto;
}
.podcast-center {
width: 30px;
height: 30px;
background-color: white;
border-radius: 50%;
margin: 20px auto;
}
.podcast-rectangle {
width: 25px;
height: 60px;
background-color: white;
border-radius: 20px;
position: absolute;
top: 80px;
left: 45px;
}
.app-store {
background: -webkit-gradient(linear, left top, left bottom, from(#00C4F9), to(#0076F0));
background: linear-gradient(#00C4F9, #0076F0);
}
.app-storeRectangle {
background-color: white;
width: 17px;
height: 135px;
border-radius: 40px;
}
.app-storeRectangle.left {
-webkit-transform: translate(75px, -30px) rotate(27.5deg);
transform: translate(75px, -30px) rotate(27.5deg);
}
.app-storeRectangle.middle {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
margin: 0 auto;
}
.app-storeRectangle.right {
-webkit-transform: translate(-75px, -30px) rotate(-27.5deg);
transform: translate(-75px, -30px) rotate(-27.5deg);
}
.adobe {
background-color: #1B2B38;
}
.adobe.lightroom {
border: 8px solid #AED4E9;
}
.adobe.spark {
border: 8px solid #FFDA00;
position: relative;
}
.adobe.photoshop {
border: 8px solid #0AC9FF;
position: relative;
}
.adobe.comp {
border: 8px solid #988AFA;
}
.light-rectangle {
background-color: #AED4E9;
width: 15px;
height: 100px;
position: relative;
margin: auto;
margin-right: 10px;
}
.light-rectangle::after {
content: "";
width: 100%;
height: 50%;
background-color: #AED4E9;
position: absolute;
-webkit-transform: skewY(-10deg) rotate(100deg) translate(67px, -32px);
transform: skewY(-10deg) rotate(100deg) translate(67px, -32px);
}
.room-rectangle {
background-color: #AED4E9;
width: 15px;
height: 65px;
margin: auto;
-webkit-transform: translate(-15px, 18px);
transform: translate(-15px, 18px);
}
.room-rectangle::after {
content: "";
width: 100%;
height: 50%;
background-color: #AED4E9;
position: absolute;
-webkit-transform: skewY(-10deg) rotate(90deg) translate(-10px, -10px);
transform: skewY(-10deg) rotate(90deg) translate(-10px, -10px);
}
.spark-innerRectangle {
width: 50px;
height: 50px;
border: 20px solid #FFDA00;
margin: auto;
z-index: 1;
}
.spark-outerRectangle {
width: 90px;
height: 90px;
border: 3px solid #FCF7CC;
}
.spark-outerRectangle.back {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
position: absolute;
top: 25%;
}
.spark-outerRectangle.front {
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
position: absolute;
top: 25%;
z-index: 2;
}
.photoshop-circle {
background-color: #0AC9FF;
width: 90px;
height: 90px;
border-radius: 50%;
position: absolute;
top: 40px;
left: 40px;
}
.photoshop-dashed {
width: 80px;
height: 80px;
background-color: transparent;
border: 5px dashed #0AC9FF;
border-radius: 50%;
position: absolute;
top: 70px;
left: 70px;
overflow: hidden;
z-index: 1;
}
.photoshop-dashed__fill {
width: 80px;
height: 80px;
border-radius: 50%;
border: 3px solid #B3F3FF;
background: repeating-linear-gradient(45deg, #B3F3FF 2px, #B3F3FF 5px, #1B2B38 2px, #1B2B38 13px);
-webkit-transform: translate(-30px, -30px);
transform: translate(-30px, -30px);
}
.layer {
opacity: 1;
box-sizing: content-box;
width: 60px;
height: 55px;
margin: auto;
background: repeating-linear-gradient(0deg, #E8DFFD 0px, #E8DFFD 6px, #1B2B38 2px, #1B2B38 12px);
-webkit-transform: skew(55deg, -35deg) translate(-20px, 20px);
transform: skew(55deg, -35deg) translate(-20px, 20px);
position: relative;
}
.layer:before, .layer:after {
content: "";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
border-radius: 2px;
}
.layer:before {
background-color: #988AFA;
left: 10px;
top: 10px;
-webkit-transform: translate3d(10px, -25px, 0px);
transform: translate3d(10px, -25px, 0px);
}
.layer:after {
border: 4px solid #E8DFFD;
background-color: #1B2B38;
top: 1px;
-webkit-transform: translate3d(35px, -35px, 0px);
transform: translate3d(35px, -35px, 0px);
width: 95%;
height: 85%;
}
.cross {
background-color: #E8DFFD;
width: 5px;
height: 75px;
z-index: 2;
-webkit-transform: rotate(50deg) translate(8px, -78px);
transform: rotate(50deg) translate(8px, -78px);
position: relative;
}
.cross::after {
content: "";
position: absolute;
z-index: 4;
width: 100%;
height: 100%;
background-color: #E8DFFD;
-webkit-transform: rotate(-100deg);
transform: rotate(-100deg);
}
.instagram {
background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(circle farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(circle farthest-corner at 100% 100%, #d9317a, transparent), -webkit-gradient(linear, left top, left bottom, from(#6559ca), color-stop(30%, #bc318f), color-stop(50%, #e33f5f), color-stop(70%, #f77638), to(#fec66d));
background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(circle farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(circle farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
}
.instagram-borderRectangle {
width: 125px;
height: 125px;
border-radius: 25%;
border: 10px solid white;
margin: auto;
position: relative;
}
.instagram-lens {
width: 50px;
height: 50px;
border-radius: 50%;
border: 10px solid white;
margin: 30px auto 0 auto;
z-index: 0;
}
.instagram-flash {
width: 2px;
height: 2px;
border-radius: 50%;
border: 8px solid white;
background-color: white;
position: absolute;
top: 10px;
right: 10px;
}
.npr-outerRing {
width: 150px;
height: 150px;
border-radius: 50%;
margin: auto;
position: relative;
overflow: hidden;
}
.npr-rectangle {
width: 0;
height: 0;
border-style: solid;
border-width: 45px 0 45px 85px;
border-color: transparent transparent transparent #2A55C5;
position: absolute;
}
.npr-rectangle.red {
border-color: transparent transparent transparent #D51800;
top: 0;
left: 18px;
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.npr-rectangle.black {
border-color: transparent transparent transparent #181818;
left: 52px;
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
}
.npr-rectangle.grey {
border-color: transparent transparent transparent #393939;
top: 33px;
left: 65px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.npr-rectangle.blue {
border-color: transparent transparent transparent #3166CC;
left: 52px;
bottom: 0;
-webkit-transform: rotate(240deg);
transform: rotate(240deg);
}
.npr-rectangle.lightBlue {
border-color: transparent transparent transparent #83ADEC;
left: 15px;
bottom: 0;
-webkit-transform: rotate(300deg);
transform: rotate(300deg);
}
.npr-rectangle.orange {
border-color: transparent transparent transparent #FF3300;
-webkit-transform: translate(-4px, 29px);
transform: translate(-4px, 29px);
}
.npr-innerRing {
width: 80px;
height: 80px;
background-color: white;
border-radius: 50%;
z-index: 1;
position: absolute;
top: 35px;
left: 35px;
}
.netflix {
background-color: #000000;
position: relative;
}
.netflix-rectangle {
width: 25px;
height: 135px;
background-color: #CF0207;
position: absolute;
top: 35px;
left: 60px;
z-index: 3;
}
.netflix-rectangle::before, .netflix-rectangle::after {
content: "";
width: 100%;
height: 100%;
background-color: #FF040D;
}
.netflix-rectangle::before {
z-index: 2;
-webkit-transform: skew(20deg);
transform: skew(20deg);
position: absolute;
left: 25px;
box-shadow: 0px 10px 20px #111;
}
.netflix-rectangle::after {
z-index: 1;
-webkit-transform: skew(0deg);
transform: skew(0deg);
position: absolute;
left: 50px;
background-color: #CF0207;
}
.paypal {
background: linear-gradient(-45deg, #0098DA, #002A6E);
position: relative;
}
.letterCircle {
width: 47.5px;
height: 75px;
border-radius: 0 50% 50% 0;
background-color: white;
-webkit-transform: skewx(-10deg);
transform: skewx(-10deg);
position: absolute;
top: 40px;
left: 93px;
}
.letterCircle::after {
content: "";
width: 90%;
height: 90%;
position: absolute;
-webkit-transform: translate(36.6px, 35px);
transform: translate(36.6px, 35px);
border-radius: 0 50% 50% 0;
background-color: rgba(173, 206, 227, 0.7);
}
.letterRectangle {
width: 40px;
height: 120px;
background-color: white;
border-radius: 5% 0 5% 5%;
-webkit-transform: skew(-10deg);
transform: skew(-10deg);
position: absolute;
top: 40px;
left: 50px;
}
.letterRectangle::after {
content: "";
width: 90%;
height: 90%;
position: absolute;
-webkit-transform: translate(40px, 35px);
transform: translate(40px, 35px);
border-radius: 5% 0 5% 5%;
background-color: rgba(173, 206, 227, 0.7);
}
<div class="main-container">
<div class="container">
<div class="icon-container">
<div class="bar bar-left"></div>
<div class="bar bar-middle"></div>
<div class="bar bar-right"></div>
</div>
<h2>Analytics </h2>
</div>
<div class="container">
<div class="icon-container">
<div class="envelope">
<div class="envelope-left"></div>
<div class="envelope-right"></div>
</div>
<div class="envelope-content"></div>
<div class="envelope-top"></div>
</div>
<h2>Inbox</h2>
</div>
<div class="container">
<div class="icon-container">
<div class="trapezoid trapezoid-yellow"></div>
<div class="trapezoid trapezoid-blue"></div>
<div class="trapezoid trapezoid-green"></div>
</div>
<h2>Drive</h2>
</div>
<div class="container">
<div class="icon-container weather">
<div class="sun"></div>
<div class="dots">
<div class="box"></div>
</div>
</div>
<h2>Weather</h2>
</div>
<div class="container">
<div class="icon-container">
<div class="photo-rectangle orange"></div>
<div class="photo-rectangle yellow"></div>
<div class="photo-rectangle green"></div>
<div class="photo-rectangle lightBlue"></div>
<div class="photo-rectangle blue"></div>
<div class="photo-rectangle purple"></div>
<div class="photo-rectangle violet"></div>
<div class="photo-rectangle red"></div>
</div>
<h2>Photos</h2>
</div>
<div class="container">
<div class="icon-container">
<div class="firstRing">
<div class="secondRing">
<div class="thirdRing">
<div class="fourthRing">
<div class="scan"></div>
</div>
</div>
</div>
</div>
</div>
<h2>Find iPhone</h2>
</div>
<div class="container">
<div class="icon-container podcast">
<div class="podcast-outerRing">
<div class="podcast-innerRing">
<div class="podcast-center"></div>
<div class="podcast-rectangle"></div>
</div>
</div>
</div>
<h2>Podcast</h2>
</div>
<div class="container">
<div class="icon-container app-store">
<div class="app-storeRectangle left"></div>
<div class="app-storeRectangle middle"></div>
<div class="app-storeRectangle right"></div>
</div>
<h2>App Store </h2>
</div>
<!--Adobe Apps-->
<div class="container">
<div class="icon-container adobe lightroom">
<div class="light-rectangle"></div>
<div class="room-rectangle"></div>
</div>
<h2>Lightroom</h2>
</div>
<div class="container">
<div class="icon-container adobe spark">
<div class="spark-innerRectangle"></div>
<div class="spark-outerRectangle back"></div>
<div class="spark-outerRectangle front"></div>
</div>
<h2>Spark Post</h2>
</div>
<div class="container">
<div class="icon-container adobe photoshop">
<div class="photoshop-circle"></div>
<div class="photoshop-dashed">
<div class="photoshop-dashed__fill"></div>
</div>
</div>
<h2>Photoshop Mix </h2>
</div>
<div class="container">
<div class="icon-container adobe comp">
<div class="layer">
<div class="cross"></div>
</div>
</div>
<h2>Adobe Comp CC </h2>
</div>
<!--others-->
<div class="container">
<div class="icon-container instagram">
<div class="instagram-borderRectangle">
<div class="instagram-lens"></div>
<div class="instagram-flash"></div>
</div>
</div>
<h2>Instagram</h2>
</div>
<div class="container">
<div class="icon-container">
<div class="npr-outerRing">
<div class="npr-rectangle red"></div>
<div class="npr-rectangle black"></div>
<div class="npr-rectangle grey"></div>
<div class="npr-rectangle blue"></div>
<div class="npr-rectangle lightBlue"></div>
<div class="npr-rectangle orange"></div>
<div class="npr-innerRing"></div>
</div>
</div>
<h2>NPR One</h2>
</div>
<div class="container">
<div class="icon-container netflix">
<div class="netflix-rectangle"></div>
</div>
<h2>Netflix</h2>
</div>
<div class="container">
<div class="icon-container paypal">
<div class="letterCircle"></div>
<div class="letterRectangle"></div>
</div>
<h2>PayPal</h2>
</div>
</div>
Minimal single element icons Set 3
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
background-color: #333;
font-size: 62.5%;
}
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
}
.flex-center {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
}
.flex-column {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
}
.flex-column-center {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
h1 {
position: fixed;
width: 100%;
top: 0;
z-index: 10;
margin: 0;
padding: 1em;
text-align: center;
color: #333;
background-color: white;
}
.container {
margin-top: 6em;
}
.display {
max-width: 70em;
}
.display .box {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
margin: 2em;
min-width: 8em;
}
.display .box label {
font-size: 1.5em;
min-width: 4em;
text-align: center;
color: white;
margin-bottom: 0.5em;
border-bottom: 0.1em solid white;
}
.display .box:hover .custom-icon {
transform: scale(1.1);
}
.display .box:hover .custom-icon.pencil, .display .box:hover .custom-icon.no-sound, .display .box:hover .custom-icon.tag, .display .box:hover .custom-icon.usb, .display .box:hover .custom-icon.ruler {
transform: rotate(45deg) scale(1.1);
}
.display .box:hover .custom-icon.refresh {
transform: rotate(30deg) scale(1.1);
}
.display .box:hover .custom-icon.link, .display .box:hover .custom-icon.paperclip {
transform: rotate(-45deg) scale(1.1);
}
.custom-icon {
position: relative;
font-size: 2em;
}
.custom-icon::before, .custom-icon::after {
position: absolute;
content: '';
}
.custom-icon.double {
position: relative;
font-size: 1em;
min-width: 4em;
}
.custom-icon.double .custom-icon {
position: absolute;
margin: 0 !important;
}
.custom-icon.calc {
width: 1.5em;
height: 2em;
border: 0.1em solid white;
border-radius: 0.2em;
}
.custom-icon.calc::before {
top: 0.2em;
right: auto;
bottom: auto;
left: 0.2em;
width: 0.9em;
height: 0.4em;
border: 0.1em solid white;
box-shadow: inset 0 0 0.1em rgba(255, 255, 255, 0.5);
}
.custom-icon.calc::after {
top: 1em;
right: auto;
bottom: auto;
left: 0.15em;
width: 1em;
height: 0.5em;
border-top: 0.1em dashed white;
border-bottom: 0.1em dashed white;
}
.custom-icon.paperclip {
width: 0.5em;
height: 1.5em;
top: 0.5em;
right: auto;
bottom: auto;
left: auto;
border: 0.1em solid white;
border-top-color: transparent;
border-bottom-left-radius: 50% 20%;
border-bottom-right-radius: 50% 30%;
transform: rotate(-45deg);
}
.custom-icon.paperclip::before {
width: 0.8em;
height: 1.8em;
top: -0.6em;
right: auto;
bottom: auto;
left: -0.4em;
border: 0.1em solid white;
border-bottom-color: transparent;
border-top-left-radius: 50% 30%;
border-top-right-radius: 50% 30%;
border-bottom-left-radius: 15% 15%;
border-bottom-right-radius: 20% 20%;
}
.custom-icon.paperclip::after {
width: 1em;
height: 1.8em;
top: -0.1em;
right: auto;
bottom: auto;
left: -0.4em;
border: 0.1em solid white;
border-top-color: transparent;
border-bottom-left-radius: 85% 55%;
border-bottom-right-radius: 85% 55%;
}
.custom-icon.toolbox {
margin-top: 0.2em;
width: 2.5em;
height: 1.8em;
border: 0.1em solid white;
border-radius: 0.1em;
}
.custom-icon.toolbox::before {
top: -0.4em;
right: auto;
bottom: auto;
left: 0.8em;
width: 0.75em;
height: 0.4em;
border: 0.1em solid white;
border-top-left-radius: 0.2em;
border-top-right-radius: 0.2em;
}
.custom-icon.toolbox::after {
top: 0.7em;
right: auto;
bottom: auto;
left: 0;
width: 100%;
height: auto;
border-top: 0.1em solid white;
}
.custom-icon.clipboard {
margin-top: 0.1em;
width: 1.8em;
height: 2em;
border: 0.1em solid white;
border-radius: 0.1em;
}
.custom-icon.clipboard::before {
top: -0.1em;
right: auto;
bottom: auto;
left: 0.45em;
width: 0.75em;
height: 0.3em;
border: 0.1em solid white;
border-bottom-left-radius: 0.15em;
border-bottom-right-radius: 0.15em;
background-color: white;
}
.custom-icon.clipboard::after {
top: -0.3em;
right: auto;
bottom: auto;
left: 0.65em;
width: 0.35em;
height: 0.45em;
border: 0.1em solid white;
border-top-left-radius: 1em;
border-top-right-radius: 1em;
z-index: 2;
background-color: white;
}
.custom-icon.document {
width: 1.8em;
height: 2em;
border: 0.1em solid white;
border-radius: 0.1em;
}
.custom-icon.document::before {
top: 0.2em;
right: auto;
bottom: auto;
left: 20%;
width: 60%;
height: 0.7em;
border-top: 0.2em solid white;
border-bottom: 0.1em solid white;
}
.custom-icon.document::after {
top: 1.1em;
right: auto;
bottom: auto;
left: 20%;
width: 60%;
height: 0.4em;
border-top: 0.1em solid white;
border-bottom: 0.1em solid white;
}
.custom-icon.pinpoint {
width: 1.2em;
height: 1.2em;
background-color: white;
border-radius: 50%;
}
.custom-icon.pinpoint::before {
top: 1.1em;
right: auto;
bottom: auto;
left: 0.5em;
width: 0.2em;
height: 0.9em;
background-color: white;
-webkit-clip-path: polygon(0 0, 100% 0, 50% 100%, 50% 100%);
clip-path: polygon(0 0, 100% 0, 50% 100%, 50% 100%);
z-index: 2;
}
.custom-icon.pinpoint::after {
top: 1.6em;
right: auto;
bottom: auto;
left: 10%;
width: 80%;
height: 0.4em;
border-radius: 50%;
border: 0.1em solid white;
opacity: 0.2;
}
.custom-icon.clock {
width: 2em;
height: 2em;
border: 0.1em solid white;
border-radius: 50%;
}
.custom-icon.clock::before {
top: 0.3em;
right: auto;
bottom: auto;
left: 1em;
width: 0.1em;
height: 0.7em;
background-color: white;
-webkit-clip-path: polygon(40% 0, 60% 0, 100% 100%, 0% 100%);
clip-path: polygon(40% 0, 60% 0, 100% 100%, 0% 100%);
transform: rotate(3deg);
}
.custom-icon.clock::after {
top: 0.8em;
right: auto;
bottom: auto;
left: 0.7em;
width: 0.1em;
height: 0.7em;
background-color: white;
-webkit-clip-path: polygon(40% 0, 60% 0, 100% 100%, 0% 100%);
clip-path: polygon(40% 0, 60% 0, 100% 100%, 0% 100%);
transform: rotate(-125deg);
}
.custom-icon.user {
width: 0.8em;
height: 0.8em;
border: 0.1em solid white;
border-radius: 50%;
}
.custom-icon.user::before {
top: 0.65em;
right: auto;
bottom: auto;
left: -0.45em;
width: 1.5em;
height: 1em;
border: 0.1em solid white;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
.custom-icon.male {
margin-top: 0.2em;
width: 1.5em;
height: 1.5em;
border: 0.15em solid white;
border-radius: 50%;
}
.custom-icon.male::before {
top: -0.35em;
right: auto;
bottom: auto;
left: 1.3em;
width: 0.2em;
height: 0.6em;
background-color: white;
transform: rotate(50deg);
}
.custom-icon.male::after {
top: -0.35em;
right: auto;
bottom: auto;
left: 1.2em;
width: 0.5em;
height: 0.5em;
border: 0.2em solid white;
border-left-color: transparent;
border-bottom-color: transparent;
transform: rotate(5deg);
}
.custom-icon.female {
width: 1.5em;
height: 1.5em;
border: 0.15em solid white;
border-radius: 50%;
}
.custom-icon.female::before {
top: 1.3em;
right: auto;
bottom: auto;
left: 0.5em;
width: 0.2em;
height: 0.65em;
background-color: white;
}
.custom-icon.female::after {
top: 1.6em;
right: auto;
bottom: auto;
left: 0.3em;
width: 0.6em;
height: 0.2em;
background-color: white;
}
.custom-icon.pencil {
width: 0.5em;
height: 1.3em;
border: 0.1em solid white;
border-top-left-radius: 0.1em;
border-top-right-radius: 0.1em;
transform: rotate(45deg);
}
.custom-icon.pencil::before {
top: -0.6em;
right: auto;
bottom: auto;
left: -0.05em;
width: 0.4em;
height: 0.4em;
border: 0.2em solid white;
border-left-color: transparent;
border-top-color: transparent;
border-right-color: transparent;
}
.custom-icon.pencil::after {
top: 1.3em;
right: auto;
bottom: auto;
left: -0.1em;
width: 0.5em;
height: 0.2em;
border: 0.1em solid white;
}
.custom-icon.flag {
margin-top: 0.1em;
width: 0.1em;
height: 1.6em;
background-color: white;
left: -0.6em;
}
.custom-icon.flag::before {
top: 0.1em;
right: auto;
bottom: auto;
left: 0;
width: 1.3em;
height: 0.8em;
background-color: white;
-webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
clip-path: polygon(100% 50%, 0 0, 0 100%);
}
.custom-icon.flag::after {
top: 0;
right: auto;
bottom: auto;
left: -0.1em;
width: 0.25em;
height: 0.25em;
background-color: white;
border-radius: 50%;
}
.custom-icon.refresh {
width: 1.8em;
height: 1.8em;
border: 0.1em solid white;
border-radius: 50%;
transform: rotate(30deg);
}
.custom-icon.refresh::before {
top: 0.6em;
right: auto;
bottom: auto;
left: 1.3em;
width: 0.8em;
height: 0.8em;
border: 0.4em solid white;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
}
.custom-icon.refresh::after {
top: 0.2em;
right: auto;
bottom: auto;
left: -0.45em;
width: 0.8em;
height: 0.8em;
border: 0.4em solid white;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
}
.custom-icon.book {
top: auto;
right: auto;
bottom: auto;
left: -0.55em;
width: 0.4em;
height: 1.8em;
border: 0.1em solid white;
border-top-left-radius: 0.1em;
border-bottom-left-radius: 0.1em;
}
.custom-icon.book::before {
top: -0.1em;
right: auto;
bottom: auto;
left: 0.2em;
width: 1.3em;
height: 1.8em;
border: 0.1em solid white;
border-top-right-radius: 0.3em;
border-bottom-right-radius: 0.3em;
}
.custom-icon.book::after {
top: 0.3em;
right: auto;
bottom: auto;
left: 0.5em;
width: 0.7em;
height: 0.5em;
border-top: 0.15em solid white;
border-bottom: 0.15em solid white;
}
.custom-icon.bell {
width: 1.8em;
height: 1.3em;
border: 0.1em solid white;
border-top-left-radius: 50% 80%;
border-top-right-radius: 50% 80%;
}
.custom-icon.bell::before {
top: 1.15em;
right: auto;
bottom: auto;
left: -0.3em;
width: 2.2em;
height: 0.4em;
border: 0.1em solid white;
}
.custom-icon.bell::after {
top: 1.45em;
right: auto;
bottom: auto;
left: 0.45em;
width: 0.75em;
height: 0.4em;
border: 0.1em solid white;
border-bottom-left-radius: 50% 80%;
border-bottom-right-radius: 50% 80%;
}
.custom-icon.mail {
margin-top: 0.1em;
width: 2.3em;
height: 1.5em;
border: 0.1em solid white;
border-radius: 0.1em;
}
.custom-icon.mail::before {
top: 0;
right: auto;
bottom: auto;
left: 0;
width: 100%;
height: 1em;
border: 1em solid white;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
}
.custom-icon.mail::after {
top: 0.5em;
right: auto;
bottom: auto;
left: 0.25em;
width: 1.6em;
height: 1.6em;
border: 0.1em solid white;
border-left-color: transparent;
border-bottom-color: transparent;
transform: rotate(-45deg);
}
.custom-icon.comment {
margin-top: 0.1em;
width: 2.3em;
height: 1.5em;
border: 0.1em solid white;
border-bottom-color: transparent;
}
.custom-icon.comment::before {
top: 1.3em;
right: -0.1em;
bottom: auto;
left: auto;
width: 1.9em;
height: 0.85em;
background-color: white;
-webkit-clip-path: polygon(100% 15%, 100% 0, 30% 0, 0 60%, 10% 60%, 35% 15%);
clip-path: polygon(100% 15%, 100% 0, 30% 0, 0 60%, 10% 60%, 35% 15%);
}
.custom-icon.comment::after {
top: 1.3em;
right: auto;
bottom: auto;
left: -0.1em;
border-top: 0.1em solid white;
border-right: 0.1em solid white;
width: 0.5em;
height: 0.5em;
}
.custom-icon.copy {
margin-top: 0.4em;
width: 1.6em;
height: 1.5em;
border: 0.1em solid white;
}
.custom-icon.copy::before {
top: -0.4em;
right: -0.4em;
bottom: auto;
left: auto;
width: 1.6em;
height: 1.5em;
border: 0.1em solid white;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 85% 15%, 0 15%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 85% 15%, 0 15%);
}
.custom-icon.trash {
margin-top: 0.2em;
width: 1.8em;
height: 1.6em;
border: 0.3em solid white;
border-top-width: 0.1em;
border-left-width: 0.4em;
border-right-width: 0.4em;
border-bottom-width: 0.1em;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 15%, 85% 15%, 85% 100%, 15% 100%, 15% 15%, 0 15%);
clip-path: polygon(0 0, 100% 0, 100% 15%, 85% 15%, 85% 100%, 15% 100%, 15% 15%, 0 15%);
border-bottom-left-radius: 0.4em;
border-bottom-right-radius: 0.4em;
}
.custom-icon.trash::before {
top: 0.4em;
right: auto;
bottom: auto;
left: 0.3em;
width: 0.4em;
height: 0.7em;
border-left: 0.1em solid white;
border-right: 0.1em solid white;
}
.custom-icon.trash::after {
top: -0.3em;
right: auto;
bottom: auto;
left: 0.1em;
width: 0.8em;
height: 0.3em;
border: 0.1em solid white;
border-bottom-color: transparent;
}
.custom-icon.mobile {
width: 1.2em;
height: 1.8em;
border: 0.1em solid white;
border-radius: 0.1em;
}
.custom-icon.mobile::before {
top: 0.2em;
right: auto;
bottom: auto;
left: 0.3em;
width: 0.4em;
height: 0.1em;
background-color: white;
}
.custom-icon.mobile::after {
top: 1.2em;
right: auto;
bottom: auto;
left: 0.35em;
width: 0.3em;
height: 0.3em;
border: 0.1em solid white;
border-radius: 50%;
}
.custom-icon.tablet {
margin-top: 0.1em;
width: 2.3em;
height: 1.6em;
border: 0.3em solid white;
border-radius: 0.1em;
}
.custom-icon.tablet::before {
top: 0;
right: auto;
bottom: auto;
left: 0;
width: 1.7em;
height: 1em;
border: 0.1em solid white;
border-radius: 0.1em;
opacity: 0.2;
}
.custom-icon.tablet::after {
top: 0.4em;
right: -0.25em;
bottom: auto;
left: auto;
width: 0.2em;
height: 0.2em;
background-color: #333;
border-radius: 50%;
}
.custom-icon.desktop {
width: 2.5em;
height: 1.5em;
border: 0.1em solid white;
border-radius: 0.1em;
}
.custom-icon.desktop::before {
top: 1.3em;
right: auto;
bottom: auto;
left: 1.1em;
width: 0.1em;
height: 0.4em;
background-color: white;
}
.custom-icon.desktop::after {
top: 1.6em;
right: auto;
bottom: auto;
left: 0.6em;
width: 1.1em;
height: 0.1em;
background-color: white;
}
.custom-icon.headphones {
width: 1.6em;
height: 0.8em;
border: 0.1em solid white;
border-bottom-color: transparent;
border-radius: 50% 50% 0 0;
}
.custom-icon.headphones::before {
top: 0.6em;
right: auto;
bottom: auto;
left: -0.4em;
width: 0.6em;
height: 1.1em;
border: 0.1em solid white;
border-top-left-radius: 45%;
border-bottom-left-radius: 45%;
}
.custom-icon.headphones::after {
top: 0.6em;
right: -0.4em;
bottom: auto;
left: auto;
width: 0.6em;
height: 1.1em;
border: 0.1em solid white;
border-top-right-radius: 45%;
border-bottom-right-radius: 45%;
}
.custom-icon.camera {
margin-top: 0.2em;
width: 2em;
height: 1.4em;
border: 0.1em solid white;
border-top-width: 0.2em;
border-radius: 0.1em;
-webkit-clip-path: polygon(0 10%, 15% 10%, 15% 0, 35% 0, 35% 10%, 100% 10%, 100% 100%, 0 100%);
clip-path: polygon(0 10%, 15% 10%, 15% 0, 35% 0, 35% 10%, 100% 10%, 100% 100%, 0 100%);
}
.custom-icon.camera::before {
top: 0.15em;
right: auto;
bottom: auto;
left: 0.5em;
width: 0.8em;
height: 0.8em;
border: 0.1em solid white;
border-radius: 50%;
box-shadow: inset 0 0 0.1em rgba(255, 255, 255, 0.8);
}
.custom-icon.camera::after {
top: 0.3em;
right: auto;
bottom: auto;
left: 0.65em;
width: 0.5em;
height: 0.5em;
border: 0.1em solid white;
border-radius: 50%;
opacity: 0.5;
}
.custom-icon.levels {
margin-top: 0.1em;
width: 0.8em;
height: 1.5em;
border: 0.1em solid white;
border-top-color: transparent;
border-bottom-color: transparent;
border-radius: 0.1em;
}
.custom-icon.levels::before {
top: 0.2em;
right: auto;
bottom: auto;
left: -0.3em;
width: 0.5em;
height: 0.5em;
border: 0.1em solid white;
background-color: #333;
border-radius: 50%;
}
.custom-icon.levels::after {
top: 0.6em;
right: auto;
bottom: auto;
left: 0.4em;
width: 0.5em;
height: 0.5em;
border: 0.1em solid white;
background-color: #333;
border-radius: 50%;
}
.custom-icon.download {
margin-top: 0.1em;
width: 0.4em;
height: 0.8em;
background-color: white;
border-radius: 0.1em;
}
.custom-icon.download::before {
top: 0.7em;
right: auto;
bottom: auto;
left: -0.3em;
width: 0.5em;
height: 0.5em;
border: 0.5em solid white;
border-bottom-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
}
.custom-icon.download::after {
top: 1em;
right: auto;
bottom: auto;
left: -0.7em;
width: 1.8em;
height: 0.5em;
border: 0.2em solid white;
border-top-width: 0;
}
.custom-icon.upload {
width: 0.4em;
height: 0.8em;
top: 0.5em;
right: auto;
bottom: auto;
left: auto;
background-color: white;
border-radius: 0.1em;
}
.custom-icon.upload::before {
top: -0.9em;
right: auto;
bottom: auto;
left: -0.3em;
width: 0.5em;
height: 0.5em;
border: 0.5em solid white;
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
}
.custom-icon.upload::after {
top: 0.6em;
right: auto;
bottom: auto;
left: -0.7em;
width: 1.8em;
height: 0.5em;
border: 0.2em solid white;
border-top-width: 0;
}
.custom-icon.link {
top: 0.4em;
right: auto;
bottom: auto;
left: auto;
width: 0.2em;
height: 0.8em;
background-color: white;
border-radius: 0.1em;
transform: rotate(-45deg);
}
.custom-icon.link::before, .custom-icon.link::after {
width: 0.6em;
height: 0.8em;
background-color: white;
-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0, 25% 0, 25% 65%, 75% 65%, 75% 0);
clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0, 25% 0, 25% 65%, 75% 65%, 75% 0);
border-bottom-left-radius: 0.3em;
border-bottom-right-radius: 0.3em;
}
.custom-icon.link::before {
top: 0.5em;
right: auto;
bottom: auto;
left: -0.2em;
}
.custom-icon.link::after {
top: -0.5em;
right: auto;
bottom: auto;
left: -0.2em;
transform: rotate(180deg);
}
.custom-icon.hourglass {
width: 1em;
height: 0.1em;
top: 0.1em;
right: auto;
bottom: auto;
left: auto;
background-color: white;
border-radius: 50%;
}
.custom-icon.hourglass::before {
top: 0.1em;
right: auto;
bottom: auto;
left: auto;
width: 1em;
height: 1em;
border: 0.5em solid white;
border-left-color: transparent;
border-right-color: transparent;
-webkit-clip-path: polygon(100% 0, 100% 100%, 50% 90%, 0 100%, 0 0, 50% 20%);
clip-path: polygon(100% 0, 100% 100%, 50% 90%, 0 100%, 0 0, 50% 20%);
}
.custom-icon.hourglass::after {
top: 1.1em;
right: auto;
bottom: auto;
left: auto;
width: 1em;
height: 0.1em;
background-color: white;
border-radius: 50%;
}
.custom-icon.stats {
margin-top: 0.2em;
width: 1.7em;
height: 1.2em;
border: 0.1em solid white;
border-top-color: transparent;
border-right-color: transparent;
}
.custom-icon.stats::before {
width: 0.9em;
height: 0.5em;
top: 0.3em;
right: auto;
bottom: auto;
left: 0.1em;
border: 0.1em solid white;
border-bottom-color: transparent;
border-left-color: transparent;
transform: rotate(-30deg);
}
.custom-icon.stats::after {
top: 0.3em;
right: auto;
bottom: auto;
left: 0.9em;
width: 0.6em;
height: 0.1em;
background-color: white;
transform: rotate(-40deg);
}
.custom-icon.peace {
margin-top: 0.2em;
width: 1.5em;
height: 1.5em;
border: 0.1em solid white;
border-radius: 50%;
overflow: hidden;
}
.custom-icon.peace::before {
width: 0.1em;
height: 1.5em;
top: 0em;
right: auto;
bottom: auto;
left: 0.6em;
background-color: white;
}
.custom-icon.peace::after {
top: 0.7em;
right: auto;
bottom: auto;
left: 0.25em;
width: 0.8em;
height: 0.8em;
border: 0.1em solid white;
border-left-color: transparent;
border-bottom-color: transparent;
transform: rotate(-45deg);
}
.custom-icon.sound {
width: 0.5em;
height: 0.1em;
top: 0.6em;
right: auto;
bottom: auto;
left: 0.7em;
background-color: white;
}
.custom-icon.sound::before {
width: 0.8em;
height: 1.5em;
top: -0.7em;
right: auto;
bottom: auto;
left: -0.9em;
background-color: white;
-webkit-clip-path: polygon(0 25%, 45% 25%, 90% 0, 90% 100%, 45% 75%, 0 75%);
clip-path: polygon(0 25%, 45% 25%, 90% 0, 90% 100%, 45% 75%, 0 75%);
}
.custom-icon.sound::after {
top: -0.45em;
right: auto;
bottom: auto;
left: -0.1em;
width: 1em;
height: 1em;
border: 0.1em solid white;
border-right-color: transparent;
border-bottom-color: transparent;
transform: rotate(-45deg);
-webkit-clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%, 0 40%);
clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%, 0 40%);
}
.custom-icon.no-sound {
width: 0.1em;
height: 1.8em;
top: -0.2em;
right: auto;
bottom: auto;
left: 0em;
background-color: white;
transform: rotate(45deg);
z-index: 2;
opacity: 1;
}
.custom-icon.no-sound::before {
width: 0.4em;
height: 0.75em;
top: 0.7em;
right: auto;
bottom: auto;
left: -0.3em;
background-color: white;
transform: rotate(-45deg);
opacity: 0.5;
}
.custom-icon.no-sound::after {
width: 1.1em;
height: 1.5em;
top: 0.3em;
right: auto;
bottom: auto;
left: -0.6em;
border: 0.4em solid white;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
transform: rotate(-45deg);
opacity: 0.5;
}
.custom-icon.microphone {
width: 0.7em;
height: 1.2em;
border: 0.1em solid white;
border-top-left-radius: 50% 30%;
border-top-right-radius: 50% 30%;
border-bottom-left-radius: 50% 30%;
border-bottom-right-radius: 50% 30%;
}
.custom-icon.microphone::before {
top: 0.4em;
right: auto;
bottom: auto;
left: -0.2em;
width: 0.9em;
height: 0.9em;
border: 0.1em solid white;
border-top-color: transparent;
border-left-color: transparent;
border-radius: 50%;
transform: rotate(45deg);
}
.custom-icon.microphone::after {
top: 1.1em;
right: auto;
bottom: auto;
left: 0em;
width: 0.5em;
height: 0.5em;
background-color: white;
-webkit-clip-path: polygon(0 100%, 0 75%, 35% 75%, 35% 0, 65% 0, 65% 75%, 100% 75%, 100% 100%);
clip-path: polygon(0 100%, 0 75%, 35% 75%, 35% 0, 65% 0, 65% 75%, 100% 75%, 100% 100%);
}
.custom-icon.rss {
width: 0.5em;
height: 0.5em;
top: 1em;
right: auto;
bottom: auto;
left: -0.4em;
background-color: white;
border-radius: 50%;
}
.custom-icon.rss::before {
top: -0.5em;
right: auto;
bottom: auto;
left: -1em;
width: 2em;
height: 2em;
border: 0.3em solid white;
border-radius: 50%;
border-top-color: transparent;
border-left-color: transparent;
border-bottom-color: transparent;
transform: rotate(-45deg);
}
.custom-icon.rss::after {
top: -1em;
right: auto;
bottom: auto;
left: -1.5em;
width: 3em;
height: 3em;
border: 0.3em solid white;
border-radius: 50%;
border-top-color: transparent;
border-left-color: transparent;
border-bottom-color: transparent;
transform: rotate(-45deg);
}
.custom-icon.bargraph {
width: 0.5em;
height: 1.5em;
top: 0em;
right: auto;
bottom: auto;
left: -0.6em;
border: 0.1em solid white;
}
.custom-icon.bargraph::before {
width: 0.5em;
height: 0.7em;
top: 0.7em;
right: auto;
bottom: auto;
left: 0.5em;
border: 0.1em solid white;
}
.custom-icon.bargraph::after {
width: 0.5em;
height: 1.1em;
top: 0.3em;
right: auto;
bottom: auto;
left: 1.1em;
border: 0.1em solid white;
}
.custom-icon.lightbulb {
width: 1.3em;
height: 1.5em;
top: 0em;
right: auto;
bottom: auto;
left: auto;
border: 0.1em solid white;
border-top-left-radius: 90% 90%;
border-top-right-radius: 90% 90%;
border-bottom-left-radius: 70% 100%;
border-bottom-right-radius: 70% 100%;
}
.custom-icon.lightbulb::before {
width: 0.7em;
height: 0.5em;
top: 1.3em;
right: auto;
bottom: auto;
left: 0.2em;
border: 0.1em solid white;
border-top-width: 0.2em;
border-bottom-color: transparent;
}
.custom-icon.lightbulb::after {
width: 0.7em;
height: 0.3em;
top: 1.6em;
right: auto;
bottom: auto;
left: 0.2em;
border: 0.1em solid white;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
.custom-icon.globe {
width: 1.5em;
height: 1.5em;
border: 0.1em solid white;
border-radius: 50%;
}
.custom-icon.globe::before {
width: 1.9em;
height: 1.9em;
top: -0.3em;
right: auto;
bottom: auto;
left: -0.3em;
border: 0.1em solid white;
border-radius: 50%;
border-left-color: transparent;
border-top-color: transparent;
transform: rotate(90deg);
}
.custom-icon.globe::after {
top: 1.6em;
right: auto;
bottom: auto;
left: 0.4em;
width: 0.5em;
height: 0.3em;
background-color: white;
-webkit-clip-path: polygon(0 100%, 0 75%, 35% 75%, 35% 0, 65% 0, 65% 75%, 100% 75%, 100% 100%);
clip-path: polygon(0 100%, 0 75%, 35% 75%, 35% 0, 65% 0, 65% 75%, 100% 75%, 100% 100%);
}
.custom-icon.search {
width: 1.2em;
height: 1.2em;
top: 0.2em;
right: auto;
bottom: auto;
left: auto;
border: 0.1em solid white;
border-radius: 50%;
}
.custom-icon.search::before {
width: 0.5em;
height: 0.3em;
top: 1.1em;
right: auto;
bottom: auto;
left: 0.8em;
background-color: white;
transform: rotate(50deg);
border-top-right-radius: 0.1em;
border-bottom-right-radius: 0.1em;
}
.custom-icon.dollar {
width: 0.2em;
height: 1.9em;
top: 0em;
right: auto;
bottom: auto;
left: 0.1em;
border: 0.2em solid white;
border-left-width: 0;
border-right-width: 0;
}
.custom-icon.dollar::before {
width: 0.8em;
height: 0.8em;
top: 0em;
right: auto;
bottom: auto;
left: -0.3em;
border: 0.2em solid white;
border-bottom-color: transparent;
border-top-left-radius: 50% 60%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
transform: rotate(-60deg);
}
.custom-icon.dollar::after {
width: 0.8em;
height: 0.8em;
top: 0.7em;
right: auto;
bottom: auto;
left: -0.3em;
border: 0.2em solid white;
border-bottom-color: transparent;
border-top-left-radius: 50% 60%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
transform: rotate(120deg);
}
.custom-icon.home {
width: 1.7em;
height: 0.8em;
top: 0.8em;
right: auto;
bottom: auto;
left: 0.1em;
border: 0.6em solid white;
border-bottom-width: 0;
border-top-width: 0;
}
.custom-icon.home::before {
width: 1.9em;
height: 1.9em;
top: -1.9em;
right: auto;
bottom: auto;
left: -0.75em;
border: 1em solid white;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
}
.custom-icon.lock {
width: 1.5em;
height: 0.5em;
top: 1.1em;
right: auto;
bottom: auto;
left: 0.1em;
border: 0.2em solid white;
border-top-width: 0;
border-left-width: 0.7em;
border-right-width: 0.7em;
border-bottom-left-radius: 0.2em;
border-bottom-right-radius: 0.2em;
}
.custom-icon.lock::before {
width: 1.5em;
height: 0.6em;
top: -0.5em;
right: auto;
bottom: auto;
left: -0.7em;
border: 0.2em solid white;
border-bottom-width: 0;
border-left-width: 0.6em;
border-right-width: 0.6em;
}
.custom-icon.lock::after {
width: 1.4em;
height: 0.9em;
top: -1.2em;
right: auto;
bottom: auto;
left: -0.65em;
border: 0.2em solid white;
border-bottom-color: transparent;
border-top-left-radius: 50% 60%;
border-top-right-radius: 50%;
}
.custom-icon.unlock {
width: 1.5em;
height: 0.5em;
top: 1.1em;
right: auto;
bottom: auto;
left: 0.55em;
border: 0.2em solid white;
border-top-width: 0;
border-left-width: 0.7em;
border-right-width: 0.7em;
border-bottom-left-radius: 0.2em;
border-bottom-right-radius: 0.2em;
}
.custom-icon.unlock::before {
width: 1.5em;
height: 0.6em;
top: -0.5em;
right: auto;
bottom: auto;
left: -0.7em;
border: 0.2em solid white;
border-bottom-width: 0;
border-left-width: 0.6em;
border-right-width: 0.6em;
}
.custom-icon.unlock::after {
width: 1.4em;
height: 0.9em;
top: -1.2em;
right: auto;
bottom: auto;
left: -1.65em;
border: 0.2em solid white;
border-bottom-width: 0;
border-top-left-radius: 50% 60%;
border-top-right-radius: 50%;
}
.custom-icon.usb {
width: 1.4em;
height: 0.8em;
top: 0.8em;
right: auto;
bottom: auto;
left: 0.4em;
background-color: white;
border-top-right-radius: 0.2em;
border-bottom-right-radius: 0.2em;
transform: rotate(45deg);
}
.custom-icon.usb::before {
width: 0.7em;
height: 0.7em;
top: 0.05em;
right: auto;
bottom: auto;
left: -0.8em;
background-color: white;
}
.custom-icon.usb::after {
width: 0.2em;
height: 0.4em;
top: 0.2em;
right: auto;
bottom: auto;
left: -0.65em;
border: 0.1em solid #333;
border-left-width: 0;
border-right-width: 0;
}
.custom-icon.music {
width: 1.2em;
height: 0.8em;
top: 0.8em;
right: auto;
bottom: auto;
left: -0.1em;
background-color: white;
border-radius: 50%;
}
.custom-icon.music::before {
width: 0.2em;
height: 1.2em;
top: -0.8em;
right: auto;
bottom: auto;
left: 0.75em;
background-color: white;
transform: rotate(-25deg);
}
.custom-icon.music::after {
width: 1em;
height: 0.4em;
top: -0.9em;
right: auto;
bottom: auto;
left: 0.5em;
background-color: white;
transform: skewX(25deg);
}
.custom-icon.tag {
width: 1.2em;
height: 0.8em;
top: 0.4em;
right: auto;
bottom: auto;
left: 0.2em;
background-color: white;
transform: rotate(45deg);
}
.custom-icon.tag::before {
width: 1em;
height: 0.8em;
top: 0em;
right: auto;
bottom: auto;
left: -1em;
border: 0.4em solid white;
border-left-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
}
.custom-icon.tag::after {
width: 0.2em;
height: 0.2em;
top: 0.3em;
right: auto;
bottom: auto;
left: -0.1em;
background-color: #333;
border-radius: 50%;
}
.custom-icon.mug {
width: 1.5em;
height: 1.3em;
top: 0em;
right: auto;
bottom: auto;
left: 0em;
background-color: white;
border-bottom-left-radius: 0.2em;
border-bottom-right-radius: 0.2em;
}
.custom-icon.mug::before {
width: 0.6em;
height: 1em;
top: 0.15em;
right: auto;
bottom: auto;
left: 1.3em;
border: 0.2em solid white;
border-left-width: 0;
border-top-right-radius: 0.2em;
border-bottom-right-radius: 0.2em;
}
.custom-icon.mug::after {
width: 1.8em;
height: 0.2em;
top: 1.4em;
right: auto;
bottom: auto;
left: -0.1em;
background-color: white;
border-bottom-left-radius: 0.3em;
border-bottom-right-radius: 0.3em;
}
.custom-icon.ruler {
width: 1.9em;
height: 0.8em;
top: 0.4em;
right: auto;
bottom: auto;
left: 0em;
background-color: white;
transform: rotate(45deg);
}
.custom-icon.ruler::before {
width: 0.9em;
height: 0.5em;
top: 0.3em;
right: auto;
bottom: auto;
left: 0.3em;
border: 0.1em solid #333;
border-top-width: 0;
border-bottom-width: 0;
}
.custom-icon.ruler::after {
width: 0.9em;
height: 0.3em;
top: 0.5em;
right: auto;
bottom: auto;
left: 0.7em;
border: 0.1em solid #333;
border-top-width: 0;
border-bottom-width: 0;
}
.custom-icon.shield {
width: 1.5em;
height: 1.6em;
top: 0em;
right: auto;
bottom: auto;
left: 0em;
background-color: white;
border-top-left-radius: 50% 20%;
border-top-right-radius: 50% 20%;
border-bottom-left-radius: 50% 80%;
border-bottom-right-radius: 50% 80%;
}
.custom-icon.shield::before {
width: 1.3em;
height: 1.4em;
top: 0.1em;
right: auto;
bottom: auto;
left: 0.1em;
background-color: #333;
border-top-left-radius: 50% 20%;
border-top-right-radius: 50% 20%;
border-bottom-left-radius: 50% 80%;
border-bottom-right-radius: 50% 80%;
}
.custom-icon.shield::after {
width: 1.1em;
height: 1.2em;
top: 0.2em;
right: auto;
bottom: auto;
left: 0.2em;
background-color: white;
border-top-left-radius: 50% 20%;
border-top-right-radius: 50% 20%;
border-bottom-left-radius: 50% 80%;
border-bottom-right-radius: 50% 80%;
}
.custom-icon.credit-card {
width: 1.9em;
height: 1.3em;
top: 0em;
right: auto;
bottom: auto;
left: 0em;
background-color: white;
border-radius: 0.2em;
}
.custom-icon.credit-card::before {
width: 2.05em;
height: 0.3em;
top: 0.2em;
right: auto;
bottom: auto;
left: -0.1em;
background-color: #333;
}
.custom-icon.credit-card::after {
width: 0.6em;
height: 0.1em;
top: 1em;
right: auto;
bottom: auto;
left: 1.1em;
background-color: #333;
}
.custom-icon.mortarboard {
width: 1.3em;
height: 0.9em;
top: 0.9em;
right: auto;
bottom: auto;
left: 0em;
border: 0.1em solid white;
border-top-width: 0;
border-bottom-left-radius: 50% 30%;
border-bottom-right-radius: 50% 30%;
}
.custom-icon.mortarboard::before {
width: 1.3em;
height: 1.3em;
top: -0.9em;
right: auto;
bottom: auto;
left: -0.1em;
border: 0.1em solid white;
transform: scaleX(1.2) scaleY(0.8) rotate(45deg);
}
.custom-icon.mortarboard::after {
width: 0.1em;
height: 0.6em;
top: -0.2em;
right: auto;
bottom: auto;
left: 1.5em;
background-color: white;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
<section class="container flex-center">
<div class="display flex-center">
<div class="box">
<label>Calculator</label>
<div class="custom-icon calc"></div>
</div>
<div class="box">
<label>Paperclip</label>
<div class="custom-icon paperclip"></div>
</div>
<div class="box">
<label>Clipboard</label>
<div class="custom-icon clipboard"></div>
</div>
<div class="box">
<label>Document</label>
<div class="custom-icon document"></div>
</div>
<div class="box">
<label>Pinpoint</label>
<div class="custom-icon pinpoint"></div>
</div>
<div class="box">
<label>Clock</label>
<div class="custom-icon clock"></div>
</div>
<div class="box">
<label>User</label>
<div class="custom-icon user"></div>
</div>
<div class="box">
<label>Male</label>
<div class="custom-icon male"></div>
</div>
<div class="box">
<label>Female</label>
<div class="custom-icon female"></div>
</div>
<div class="box">
<label>Transgender</label>
<!-- this one technically isn't a single element,-->
<!-- it's two single element icons on top of one-->
<!-- another :/-->
<div class="custom-icon double">
<div class="custom-icon male"></div>
<div class="custom-icon female"></div>
</div>
</div>
<div class="box">
<label>Pencil</label>
<div class="custom-icon pencil"></div>
</div>
<div class="box">
<label>Flag</label>
<div class="custom-icon flag"></div>
</div>
<div class="box">
<label>Refresh</label>
<div class="custom-icon refresh"></div>
</div>
<div class="box">
<label>Book</label>
<div class="custom-icon book"></div>
</div>
<div class="box">
<label>Toolbox</label>
<div class="custom-icon toolbox"></div>
</div>
<div class="box">
<label>Mail</label>
<div class="custom-icon mail"></div>
</div>
<div class="box">
<label>Comment</label>
<div class="custom-icon comment"></div>
</div>
<div class="box">
<label>Copy</label>
<div class="custom-icon copy"></div>
</div>
<div class="box">
<label>Trash</label>
<div class="custom-icon trash"></div>
</div>
<div class="box">
<label>Mobile</label>
<div class="custom-icon mobile"></div>
</div>
<div class="box">
<label>Tablet</label>
<div class="custom-icon tablet"></div>
</div>
<div class="box">
<label>Desktop</label>
<div class="custom-icon desktop"></div>
</div>
<div class="box">
<label>Headphones</label>
<div class="custom-icon headphones"></div>
</div>
<div class="box">
<label>Camera</label>
<div class="custom-icon camera"></div>
</div>
<div class="box">
<label>Levels</label>
<div class="custom-icon levels"></div>
</div>
<div class="box">
<label>Download</label>
<div class="custom-icon download"></div>
</div>
<div class="box">
<label>Upload</label>
<div class="custom-icon upload"></div>
</div>
<div class="box">
<label>Link</label>
<div class="custom-icon link"></div>
</div>
<div class="box">
<label>Hourglass</label>
<div class="custom-icon hourglass"></div>
</div>
<div class="box">
<label>Stats</label>
<div class="custom-icon stats"></div>
</div>
<div class="box">
<label>Peace</label>
<div class="custom-icon peace"></div>
</div>
<div class="box">
<label>Sound</label>
<div class="custom-icon sound"></div>
</div>
<div class="box">
<label>No Sound</label>
<div class="custom-icon no-sound"></div>
</div>
<div class="box">
<label>Microphone</label>
<div class="custom-icon microphone"></div>
</div>
<div class="box">
<label>RSS</label>
<div class="custom-icon rss"></div>
</div>
<div class="box">
<label>Bar Graph</label>
<div class="custom-icon bargraph"></div>
</div>
<div class="box">
<label>Bell</label>
<div class="custom-icon bell"></div>
</div>
<div class="box">
<label>Lightbulb</label>
<div class="custom-icon lightbulb"></div>
</div>
<div class="box">
<label>Globe</label>
<div class="custom-icon globe"></div>
</div>
<div class="box">
<label>Search</label>
<div class="custom-icon search"></div>
</div>
<div class="box">
<label>Dollar</label>
<div class="custom-icon dollar"></div>
</div>
<div class="box">
<label>Home</label>
<div class="custom-icon home"></div>
</div>
<div class="box">
<label>Lock</label>
<div class="custom-icon lock"></div>
</div>
<div class="box">
<label>Unlock</label>
<div class="custom-icon unlock"></div>
</div>
<div class="box">
<label>USB</label>
<div class="custom-icon usb"></div>
</div>
<div class="box">
<label>Music</label>
<div class="custom-icon music"></div>
</div>
<div class="box">
<label>Tag</label>
<div class="custom-icon tag"></div>
</div>
<div class="box">
<label>Mug</label>
<div class="custom-icon mug"></div>
</div>
<div class="box">
<label>Ruler</label>
<div class="custom-icon ruler"></div>
</div>
<div class="box">
<label>Shield</label>
<div class="custom-icon shield"></div>
</div>
<div class="box">
<label>Credit Card</label>
<div class="custom-icon credit-card"></div>
</div>
<div class="box">
<label>Mortarboard</label>
<div class="custom-icon mortarboard"></div>
</div>
</div>
</section>
84 GUI Icons with Pure CSS
html, body {
padding: 0;
margin: 0;
font: 1em/1.4 Cambria, Georgia, sans-serif;
color: #333;
background: #fff;
}
header, hgroup {
display: block;
}
a:link, a:visited {
border-bottom: 1px solid #c55500;
color: #c55500;
text-decoration: none;
}
a:visited {
border-bottom: 1px solid #730800;
color: #730800;
}
a:hover, a:focus, a:active {
border: 0;
color: #fff;
background: #c55500;
}
.container {
width: 540px;
overflow: hidden;
padding: 0 0 10px;
margin: 0 auto 40px;
}
.header {
border-bottom: 1px solid #ddd;
}
.footer {
padding: 0 0 30px;
margin-top: 20px;
margin-bottom: 0;
text-align: center;
}
.section {
float: left;
width: 30%;
margin-left: 4.9%;
}
h2 + .section {
margin-left: 0;
}
h1 {
margin: 1em 0 0;
font-size: 2.5em;
font-weight: normal;
line-height: 1.2;
text-align: center;
}
h2 {
margin: 0.5em 0 1.5em;
font-size: 1.25em;
font-weight: normal;
font-style: italic;
text-align: center;
}
p {
margin: 1em 0;
line-height: 1.4em;
}
pre {
margin: 1.4em 0;
font-size: 12px;
line-height: 1.4em;
white-space: pre-wrap;
word-wrap: break-word;
}
.follow {
clear: both;
margin-top: 1em;
}
.follow span {
font-weight: bold;
}
/* ----------------------------------------------------------------------------------------------------------------------------
== ICONS STYLES
** ---------------------------------------------------------------------------------------------------------------------------- */
ul {
padding: 0;
margin: 0;
}
li {
position: relative;
z-index: 1;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0 0 0.25em;
}
li a:link, li a:visited {
display: block;
border: 0;
padding-left: 28px;
color: #c55500;
}
li a:hover, li a:focus, li a:active {
color: #730800;
background: transparent;
}
li:before, li:after, li a:before, li a:after {
content: "";
position: absolute;
top: 50%;
left: 0;
}
li a:before, li a:after {
margin: -8px 0 0;
background: #c55500;
}
li a:hover:before, li a:focus:before, li a:active:before {
background: #730800;
}
/* Not links */
.player,
.headphones,
.ribbon,
.views,
.location,
.info,
.help,
.pie,
.success,
.success-alt,
.warning,
.denied {
padding-left: 28px;
}
/* ----------------------------------------------------------------------------------------------------------------------------
== USER INTERACTIONS
** ---------------------------------------------------------------------------------------------------------------------------- */
/* SEARCH
------------------------------------------------------------------------------------------------------------------------------- */
.search a:before {
width: 6px;
height: 6px;
border: 3px solid #c55500;
background: transparent;
/* css3 */
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
.search a:after {
left: 10px;
width: 3px;
height: 7px;
margin-top: 0;
/* css3 */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.search a:hover:before, .search a:focus:before, .search a:active:before {
border-color: #730800;
background: transparent;
}
.search a:hover:after, .search a:focus:after, .search a:active:after {
background: #730800;
}
/* ADD
------------------------------------------------------------------------------------------------------------------------------- */
.add a:before {
width: 16px;
height: 16px;
/* css3 */
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
.add a:after {
left: 3px;
width: 10px;
height: 2px;
margin-top: -1px;
background: #fff;
}
.add:before {
z-index: 10;
left: 7px;
width: 2px;
height: 10px;
margin-top: -5px;
background: #fff;
}
/* Alternative style */
.add-alt a:before {
left: 6px;
width: 5px;
height: 15px;
margin-top: -7px;
background: #c55500;
}
.add-alt a:after {
left: 1px;
width: 15px;
height: 5px;
margin-top: -2px;
background: #c55500;
}
.add-alt a:hover:after, .add-alt a:focus:after, .add-alt a:active:after {
background: #730800;
}
/* REMOVE
------------------------------------------------------------------------------------------------------------------------------- */
.remove a:before {
width: 16px;
height: 16px;
/* css3 */
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
.remove a:after {
left: 3px;
width: 10px;
height: 2px;
margin-top: -1px;
background: #fff;
}
/* Alternative style */
.remove-alt a:before {
left: 1px;
width: 15px;
height: 5px;
margin-top: -2px;
background: #c55500;
}
/* DELETE
------------------------------------------------------------------------------------------------------------------------------- */
.delete a:before {
width: 16px;
height: 16px;
/* css3 */
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
.delete a:after {
left: 3px;
width: 10px;
height: 2px;
margin-top: -1px;
background: #fff;
/* css3 */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.delete:before {
z-index: 10;
left: 7px;
width: 2px;
height: 10px;
margin-top: -5px;
background: #fff;
/* css3 */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Alternative style */
.delete-alt a:before, .delete-alt a:after {
left: 6px;
width: 5px;
height: 15px;
margin-top: -7px;
background: #c55500;
/* css3 */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.delete-alt a:after {
left: 1px;
width: 15px;
height: 5px;
margin-top: -2px;
}
.delete-alt a:hover:after,
.delete-alt a:focus:after,
.delete-alt a:active:after {
background: #730800;
}
/* REPORT
------------------------------------------------------------------------------------------------------------------------------- */
.report a:before {
left: 3px;
width: 7px;
height: 7px;
margin-top: -5px;
border-width: 7px 0 0 2px;
border-style: solid;
border-color: #c55500;
background: transparent;
/* css3 */
-webkit-transform: skewY(-8deg);
-moz-transform: skewY(-8deg);
-ms-transform: skewY(-8deg);
-o-transform: skewY(-8deg);
transform: skewY(-8deg);
}
.report a:after {
left: 9px;
width: 6px;
height: 7px;
margin-top: -3px;
background: #c55500;
/* css3 */
-webkit-transform: skewY(-6deg);
-moz-transform: skewY(-6deg);
-ms-transform: skewY(-6deg);
-o-transform: skewY(-6deg);
transform: skewY(-6deg);
}
.report a:hover:before, .report a:focus:before, .report a:active:before {
border-color: #730800;
background: transparent;
}
.report a:hover:after, .report a:focus:after, .report a:active:after {
background: #730800;
}
/* TRASH
------------------------------------------------------------------------------------------------------------------------------- */
.trash:after {
left: 6px;
width: 1px;
height: 7px;
border-right: 3px double #c55500;
border-left: 1px solid #c55500;
margin-top: -2px;
}
.trash a:before {
left: 2px;
width: 9px;
height: 11px;
margin-top: -6px;
border: 2px solid #c55500;
background: transparent;
}
.trash a:after {
left: 5px;
width: 3px;
height: 2px;
margin-top: -9px;
border: 2px solid #c55500;
border-bottom: 0;
background: transparent;
/* css3 */
-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-moz-border-radius: 2px 2px 0 0;
border-radius: 2px 2px 0 0;
}
.trash:hover:after,
.trash a:hover:before,
.trash a:focus:before,
.trash a:active:before,
.trash a:hover:after,
.trash a:focus:after,
.trash a:active:after {
border-color: #730800;
background: transparent;
}
/* LOCK / UNLOCK
------------------------------------------------------------------------------------------------------------------------------- */
.lock:before, .lock:after, .unlock:before, .unlock:after {
z-index: 10;
left: 8px;
width: 3px;
height: 3px;
margin-top: -2px;
background: #fff;
/* css3 */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.lock:before, .unlock:before {
left: 9px;
width: 1px;
height: 4px;
margin-top: 0px;
}
.lock a:before, .unlock a:before {
left: 3px;
width: 13px;
height: 10px;
margin-top: -4px;
}
.lock a:after, .unlock a:after {
left: 5px;
width: 5px;
height: 5px;
border: 2px solid #c55500;
border-bottom: 0;
margin-top: -11px;
background: transparent;
/* css3 */
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.unlock a:after {
left: 12px;
}
.lock a:hover:after,
.lock a:focus:after,
.lock a:active:after,
.unlock a:hover:after,
.unlock a:focus:after,
.unlock a:active:after {
border-color: #730800;
}
/* UPDATE STATUS
------------------------------------------------------------------------------------------------------------------------------- */
.update:before {
left: 10px;
border-width: 2px 0 2px 2px;
border-style: solid;
border-color: transparent #c55500;
margin-top: -1px;
}
.update a:before {
left: 4px;
width: 10px;
height: 10px;
border: 2px solid #c55500;
margin-top: -6px;
background: transparent;
/* css3 */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.update a:after {
left: 10px;
width: 10px;
height: 3px;
border: 1px solid #fff;
margin-top: -6px;
/* css3 */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.update:hover:before {
border-left-color: #730800;
}
.update a:hover:before, .update a:focus:before, .update a:active:before {
border-color: #730800;
background: transparent;
}
.update a:hover:after, .update a:focus:after, .update a:active:after {
background: #730800;
}
/* RETWEET
------------------------------------------------------------------------------------------------------------------------------- */
.retweet:before, .retweet a:before {
border-style: solid;
border-color: transparent;
background: transparent;
}
.retweet:before {
z-index: -1;
left: 12px;
margin-top: 2px;
border-width: 5px 5px 0;
border-left-color: #fff;
border-top-color: #c55500;
}
.retweet a:before {
left: -1px;
margin-top: -7px;
border-width: 0 5px 5px;
border-right-color: #fff;
border-bottom-color: #c55500;
}
.retweet a:after {
z-index: -2;
left: 3px;
width: 10px;
height: 6px;
margin-top: -6px;
border: 3px solid #c55500;
background: transparent;
}
.retweet:hover:before {
border-top-color: #730800;
}
.retweet a:hover:before, .retweet a:focus:before, .retweet a:active:before {
border-bottom-color: #730800;
background: transparent;
}
.retweet a:hover:after, .retweet a:focus:after, .retweet a:active:after {
border-color: #730800;
}
/* SAVE
------------------------------------------------------------------------------------------------------------------------------- */
.save:before, .save a:before {
left: 6px;
border-width: 10px 0 10px 8px;
border-style: solid;
border-color: transparent #c55500;
margin-top: -9px;
background: transparent;
/* css3 */
-webkit-transform: rotate(22.5deg);
-moz-transform: rotate(22.5deg);
-ms-transform: rotate(22.5deg);
-o-transform: rotate(22.5deg);
transform: rotate(22.5deg);
}
.save a:before {
left: 6px;
/* css3 */
-webkit-transform: rotate(157.5deg);
-moz-transform: rotate(157.5deg);
-ms-transform: rotate(157.5deg);
-o-transform: rotate(157.5deg);
transform: rotate(157.5deg);
}
.save a:after {
border-width: 8px 10px 0;
border-style: solid;
border-color: #c55500 transparent;
margin-top: -3px;
background: transparent;
}
.save:hover:before,
.save:focus:before,
.save:active:before,
.save a:hover:before,
.save a:focus:before,
.save a:active:before {
border-left-color: #730800;
background: transparent;
}
.save a:hover:after, .save a:focus:after, .save a:active:after {
border-top-color: #730800;
background: transparent;
}
/* EDIT
------------------------------------------------------------------------------------------------------------------------------- */
.edit a:before {
left: 3px;
width: 5px;
height: 5px;
margin-top: 2px;
background: #c55500;
-webkit-transform: skew(-10deg, -10deg);
-moz-transform: skew(-10deg, -10deg);
-ms-transform: skew(-10deg, -10deg);
-o-transform: skew(-10deg, -10deg);
transform: skew(-10deg, -10deg);
}
.edit a:after {
left: 3px;
width: 13px;
height: 6px;
border-left: 1px solid #fff;
margin-top: -3px;
/* css3 */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.edit a:hover:before,
.edit a:focus:before,
.edit a:active:before,
.edit a:hover:after,
.edit a:focus:after,
.edit a:active:after {
background: #730800;
}
/* DOWNLOAD
------------------------------------------------------------------------------------------------------------------------------- */
.download a:before {
width: 14px;
height: 8px;
border: 3px solid #c55500;
border-top: 0;
margin-top: -5px;
background: transparent;
}
.download a:after {
left: 5px;
border-width: 5px 5px 0;
border-style: solid;
border-color: #c55500 transparent;
margin-top: -5px;
background: transparent;
}
.download a:hover:before, .download a:focus:before, .download a:active:before {
border-color: #730800;
background: transparent;
}
.download a:hover:after, .download a:focus:after, .download a:active:after {
border-color: #730800 transparent;
}
/* ARROWS (up/down/back/forward)
------------------------------------------------------------------------------------------------------------------------------- */
.arrow a:before {
width: 16px;
height: 16px;
/* css3 */
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
.arrow a:after {
left: 8px;
border-width: 5px 0 5px 6px;
border-style: solid;
border-color: transparent #fff;
margin-top: -5px;
background: transparent;
}
.arrow:before {
z-index: 10;
left: 3px;
width: 5px;
height: 4px;
margin-top: -2px;
background: #fff;
}
.arrow.back a:after {
left: 2px;
border-width: 5px 6px 5px 0;
}
.arrow.back:before {
left: 8px;
}
.arrow.up a:after, .arrow.down a:after {
left: 3px;
border-width: 0 5px 6px;
border-color: #fff transparent;
margin-top: -6px;
}
.arrow.up:before, .arrow.down:before {
left: 6px;
width: 4px;
height: 5px;
margin-top: 0;
}
.arrow.down a:after {
border-width: 6px 5px 0;
margin-top: 0;
}
.arrow.down:before {
margin-top: -5px;
}
/* Alternative style */
.arrow-alt a:before {
left: 8px;
border-width: 7px 0 7px 8px;
border-style: solid;
border-color: transparent #c55500;
margin-top: -7px;
background: transparent;
}
.arrow-alt a:after {
left: 0;
width: 8px;
height: 6px;
margin-top: -3px;
background: #c55500;
}
.arrow-alt a:hover:before,
.arrow-alt a:focus:before,
.arrow-alt a:active:before {
border-color: transparent #730800;
background: transparent;
}
.arrow-alt a:hover:after, .arrow-alt a:focus:after, .arrow-alt a:active:after {
background: #730800;
}
.arrow-alt.back a:before {
left: 0;
border-width: 7px 8px 7px 0;
}
.arrow-alt.back a:after {
left: 8px;
}
.arrow-alt.up a:before, .arrow-alt.down a:before {
left: 1px;
margin-top: -8px;
border-width: 0 7px 8px;
border-color: #c55500 transparent;
}
.arrow-alt.up a:after, .arrow-alt.down a:after {
left: 5px;
width: 6px;
height: 8px;
margin-top: 0;
}
.arrow-alt.down a:before {
left: 1px;
margin-top: 0;
border-width: 8px 7px 0;
}
.arrow-alt.down a:after {
margin-top: -8px;
}
.arrow-alt.up a:hover:before,
.arrow-alt.up a:focus:before,
.arrow-alt.up a:active:before,
.arrow-alt.down a:hover:before,
.arrow-alt.down a:focus:before,
.arrow-alt.down a:active:before {
border-color: #730800 transparent;
}
/* Alternative style 2 */
.arrow-alt2 a:before {
left: 8px;
width: 7px;
height: 7px;
border-width: 0 3px 3px 0;
border-style: solid;
border-color: #c55500;
margin-top: -5px;
background: transparent;
/* css3 */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.arrow-alt2 a:after {
left: 3px;
width: 13px;
height: 4px;
margin-top: -2px;
background: #c55500;
}
.arrow-alt2 a:hover:before,
.arrow-alt2 a:focus:before,
.arrow-alt2 a:active:before {
border-color: #730800;
background: transparent;
}
.arrow-alt2 a:hover:after,
.arrow-alt2 a:focus:after,
.arrow-alt2 a:active:after {
background: #730800;
}
.arrow-alt2.back a:before {
left: 4px;
border-width: 0 0 3px 3px;
/* css3 */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.arrow-alt2.back a:after {
left: 5px;
}
.arrow-alt2.back a:hover:before,
.arrow-alt2.back a:focus:before,
.arrow-alt2.back a:active:before {
border-right-color: #730800;
}
.arrow-alt2.up a:before {
left: 4px;
border-width: 3px 0 0 3px;
/* css3 */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.arrow-alt2.up a:after, .arrow-alt2.down a:after {
left: 7px;
width: 4px;
height: 13px;
margin-top: -4px;
}
.arrow-alt2.down a:before {
left: 4px;
border-width: 0 0 3px 3px;
/* css3 */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.arrow-alt2.down a:after {
margin-top: -8px;
}
/* COMMENT
------------------------------------------------------------------------------------------------------------------------------- */
.comment a:before {
width: 16px;
height: 10px;
margin-top: -8px;
/* css3 */
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.comment a:after {
left: 8px;
border: 2px solid transparent;
border-top-color: #c55500;
border-left-color: #c55500;
margin-top: 2px;
background: transparent;
}
.comment a:hover:after, .comment a:focus:after, .comment a:active:after {
border-top-color: #730800;
border-left-color: #730800;
}
/* LIKE
------------------------------------------------------------------------------------------------------------------------------- */
.like a:before, .like a:after {
width: 14px;
height: 9px;
margin-top: -6px;
background: #c55500;
/* css3 */
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius: 6px 0 0 6px;
border-radius: 6px 0 0 6px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.like a:after {
left: 4px;
/* css3 */
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.like a:hover:after, .like a:focus:after, .like a:active:after {
background: #730800;
}
/* ----------------------------------------------------------------------------------------------------------------------------
== MISC
** ---------------------------------------------------------------------------------------------------------------------------- */
/* HOME
------------------------------------------------------------------------------------------------------------------------------- */
.home a:before {
left: 1px;
border-style: solid;
border-color: transparent;
border-width: 8px 7px;
border-bottom-color: #c55500;
margin-top: -16px;
background: transparent;
}
.home a:after {
left: 3px;
width: 2px;
height: 4px;
border-style: solid;
border-color: #c55500 #c55500 transparent;
border-width: 3px 4px 0;
margin-top: 0;
background: transparent;
}
.home a:hover:before, .home a:focus:before, .home a:active:before {
border-bottom-color: #730800;
background: transparent;
}
.home a:hover:after, .home a:focus:after, .home a:active:after {
border-color: #730800 #730800 transparent;
}
/* PHOTO
------------------------------------------------------------------------------------------------------------------------------- */
.photo a:before {
left: 2px;
width: 16px;
height: 12px;
margin-top: -6px;
}
.photo a:after {
left: 6px;
width: 8px;
height: 2px;
margin-top: -8px;
}
.photo:after {
left: 6px;
width: 8px;
height: 8px;
margin-top: -4px;
background: #fff;
/* css3 */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.photo a:hover:after, .photo a:focus:after, .photo a:active:after {
background: #730800;
}
/* VIDEO
------------------------------------------------------------------------------------------------------------------------------- */
.video a:before {
left: 2px;
width: 14px;
height: 12px;
margin-top: -6px;
/* css3 */
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.video a:after {
left: 14px;
border-style: solid;
border-width: 5px 6px 5px 0;
border-color: transparent;
border-right-color: #c55500;
margin-top: -5px;
background: transparent;
}
.video a:hover:after, .video a:focus:after, .video a:active:after {
border-right-color: #730800;
}
/* MUSIC
------------------------------------------------------------------------------------------------------------------------------- */
.music a:before {
left: 8px;
width: 6px;
height: 10px;
border-width: 2px 1px 0 2px;
border-style: solid;
border-color: #c55500 transparent transparent #c55500;
background: transparent;
-webkit-border-radius: 0 10px 0 0;
-moz-border-radius: 0 10px 0 0;
border-radius: 0 10px 0 0;
}
.music a:after {
left: 3px;
width: 7px;
height: 6px;
margin-top: 0;
background: #c55500;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.music a:hover:before, .music a:focus:before, .music a:active:before {
border-color: #730800 transparent transparent #730800;
background: transparent;
}
.music a:hover:after, .music a:focus:after, .music a:active:after {
background: #730800;
}
/* CALL
------------------------------------------------------------------------------------------------------------------------------- */
.call a:before {
left: 5px;
width: 4px;
height: 8px;
border-width: 5px 0 5px 2px;
border-style: solid;
border-color: #c55500;
background: transparent;
/* css3 */
-webkit-border-top-left-radius: 3px 5px;
-webkit-border-bottom-left-radius: 3px 5px;
-moz-border-radius-topleft: 3px 5px;
-moz-border-radius-bottomleft: 3px 5px;
border-top-left-radius: 3px 5px;
border-bottom-left-radius: 3px 5px;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.call-on a:after {
left: 10px;
width: 6px;
height: 6px;
margin-top: -8px;
border: 4px double #c55500;
border-width: 4px 4px 0 0;
background: transparent;
/* css3 */
-webkit-border-radius: 0 15px 0 0;
-moz-border-radius: 0 15px 0 0;
border-radius: 0 15px 0 0;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-o-transform: rotate(15deg);
transform: rotate(15deg);
}
.call a:hover:before,
.call a:focus:before,
.call a:active:before,
.call a:hover:after,
.call a:focus:after,
.call a:active:after {
border-color: #730800;
background: transparent;
}
/* TAGS
------------------------------------------------------------------------------------------------------------------------------- */
.tags a:before {
left: 6px;
width: 9px;
height: 15px;
margin-top: -8px;
background: #c55500;
/* css3 */
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius: 3px 3px 0 0;
border-radius: 5px 5px 0 0;
-webkit-transform: rotate(-40deg);
-moz-transform: rotate(-40deg);
-ms-transform: rotate(-40deg);
-o-transform: rotate(-40deg);
transform: rotate(-40deg);
}
.tags a:after {
left: 7px;
width: 3px;
height: 3px;
margin-top: -4px;
background: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* RSS
------------------------------------------------------------------------------------------------------------------------------- */
.rss a:before {
left: 3px;
width: 5px;
height: 5px;
margin-top: 0;
/* css3 */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.rss a:after {
left: 3px;
width: 8px;
height: 8px;
border-width: 5px 5px 0 0;
border-style: double;
border-color: #c55500;
background: transparent;
/* css3 */
-webkit-border-top-right-radius: 25px;
-moz-border-radius: 0 25px 0 0;
border-radius: 0 25px 0 0;
}
.rss a:hover:after, .rss a:focus:after, .rss a:active:after {
border-color: #730800;
}
/* EMAIL
------------------------------------------------------------------------------------------------------------------------------- */
.email:before {
z-index: 10;
left: 6px;
width: 12px;
height: 12px;
border-width: 0 1px 1px 0;
border-style: solid;
border-color: #fff;
margin-top: -13px;
background: transparent;
/* css3 */
-webkit-transform: rotate(39deg) skew(-12deg);
-moz-transform: rotate(39deg) skew(-12deg);
-ms-transform: rotate(39deg) skew(-12deg);
-o-transform: rotate(39deg) skew(-12deg);
transform: rotate(39deg) skew(-12deg);
}
.email a:before {
left: 3px;
width: 6px;
border-width: 6px;
border-style: solid;
border-color: #c55500 #c55500 transparent;
margin-top: -7px;
background: transparent;
}
.email a:after {
left: 4px;
border-width: 0 8px 9px;
border-style: solid;
border-color: #c55500 transparent;
margin-top: -3px;
background: transparent;
}
.email a:hover:before, .email a:focus:before, .email a:active:before {
border-color: #730800 #730800 transparent;
background: transparent;
}
.email a:hover:after, .email a:focus:after, .email a:active:after {
border-bottom-color: #730800;
}
/* PROFILE
------------------------------------------------------------------------------------------------------------------------------- */
.profile a:before {
left: 4px;
width: 16px;
height: 5px;
margin-top: 1px;
/* css3 */
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.profile a:after {
left: 9px;
width: 6px;
height: 10px;
margin-top: -7px;
/* css3 */
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px 10px;
-webkit-border-bottom-left-radius: 5px 10px;
-moz-border-radius: 5px 5px 5px 5px / 5px 5px 10px 10px;
border-radius: 5px 5px 5px 5px / 5px 5px 10px 10px;
}
.profile a:hover:after, .profile a:focus:after, .profile a:active:after {
background: #730800;
}
/* FILE
------------------------------------------------------------------------------------------------------------------------------- */
.file a:before {
left: 5px;
width: 8px;
height: 12px;
border: 2px solid #c55500;
background: transparent;
}
.file a:after {
left: 4px;
border-width: 3px;
border-style: solid;
border-color: #fff #c55500 #c55500 #fff;
margin-top: -9px;
background: transparent;
}
.file a:hover:before, .file a:focus:before, .file a:active:before {
border-color: #730800;
background: transparent;
}
.file a:hover:after, .file a:focus:after, .file a:active:after {
border-color: #fff #730800 #730800 #fff;
}
/* FOLDER
------------------------------------------------------------------------------------------------------------------------------- */
.folder a:before {
left: 4px;
width: 16px;
height: 12px;
margin-top: -6px;
/* css3 */
-webkit-border-bottom-right-radius: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius: 0 0 1px 1px;
border-radius: 0 0 1px 1px;
}
.folder a:after {
left: 6px;
width: 6px;
height: 2px;
margin-top: -8px;
background: #c55500;
/* css3 */
-webkit-border-top-right-radius: 1px;
-webkit-border-top-left-radius: 1px;
-moz-border-radius: 1px 1px 0 0;
border-radius: 1px 1px 0 0;
}
.folder a:hover:after, .folder a:focus:after, .folder a:active:after {
background: #730800;
}
/* LIST VIEW
------------------------------------------------------------------------------------------------------------------------------- */
.list a:before, .list a:after {
left: 8px;
width: 12px;
height: 2px;
border-width: 6px 0;
border-style: double;
border-color: #c55500;
background: transparent;
}
.list a:after {
left: 4px;
width: 2px;
}
.list a:hover:before,
.list a:focus:before,
.list a:active:before,
.list a:hover:after,
.list a:focus:after,
.list a:active:after {
border-color: #730800;
background: transparent;
}
/* PERMALINK
------------------------------------------------------------------------------------------------------------------------------- */
.permalink a:before, .permalink a:after, .permalink:after {
left: 4px;
width: 6px;
height: 4px;
border: 2px solid #c55500;
background: transparent;
/* css3 */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.permalink a:after {
left: 12px;
margin-top: -0px;
}
.permalink:after {
left: 7px;
width: 10px;
height: 2px;
border: 1px solid #fff;
margin-top: -2px;
background: #c55500;
}
.permalink a:hover:before,
.permalink a:focus:before,
.permalink a:active:before,
.permalink a:hover:after,
.permalink a:focus:after,
.permalink a:active:after {
border-color: #730800;
background: transparent;
}
.permalink:hover:after {
background: #730800;
}
/* HISTORY
------------------------------------------------------------------------------------------------------------------------------- */
.history a:before, .history a:after {
left: 2px;
width: 13px;
height: 13px;
border: 2px solid #c55500;
margin-top: -8px;
background: transparent;
}
.history a:before {
/* css3 */
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
}
.history a:after {
left: 10px;
width: 4px;
height: 5px;
border-width: 0 0 2px 2px;
margin-top: -5px;
background: transparent;
}
.history a:hover:before,
.history a:focus:before,
.history a:active:before,
.history a:hover:after,
.history a:focus:after,
.history a:active:after {
border-color: #730800;
background: transparent;
}
/* TOOLS
------------------------------------------------------------------------------------------------------------------------------- */
.tools:after {
left: 13px;
width: 3px;
height: 5px;
margin-top: -8px;
background: #fff;
/* css3 */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.tools a:before {
left: 6px;
width: 4px;
height: 15px;
margin-top: -7px;
background: #c55500;
/* css3 */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.tools a:after {
left: 8px;
width: 9px;
height: 9px;
background: #c55500;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.tools a:hover:after, .tools a:focus:after, .tools a:active:after {
background: #730800;
}
/* MP3 PLAYER
------------------------------------------------------------------------------------------------------------------------------- */
.player:before {
left: 3px;
width: 9px;
height: 6px;
border-width: 2px 2px 11px;
border-style: solid;
border-color: #555;
margin-top: -10px;
/* css3 */
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.player:after {
left: 6px;
width: 3px;
height: 3px;
border: 2px solid #fff;
/* css3 */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
/* HEADPHONES
------------------------------------------------------------------------------------------------------------------------------- */
.headphones:before {
left: 2px;
width: 12px;
height: 10px;
border-width: 2px 2px 0;
border-style: solid;
border-color: #555;
margin: -8px 0 0;
/* css3 */
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius: 20px 20px 0 0;
border-radius: 20px 20px 0 0;
}
.headphones:after {
left: 5px;
width: 4px;
height: 6px;
border-width: 0 3px;
border-style: solid;
border-color: #555;
}
/* RIBBON
------------------------------------------------------------------------------------------------------------------------------- */
.ribbon:before {
left: 6px;
border-width: 10px 5px 6px;
border-style: solid;
border-color: #F0A1D1 #F0A1D1 transparent;
margin: -8px 0 0;
}
/* VIEWS
------------------------------------------------------------------------------------------------------------------------------- */
.views:before {
left: 3px;
width: 14px;
height: 14px;
margin-top: -8px;
background: #555;
-webkit-border-top-left-radius: 12px;
-webkit-border-bottom-right-radius: 12px;
-moz-border-radius: 12px 0 12px 0;
border-radius: 12px 0 12px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.views:after {
left: 6px;
width: 4px;
height: 4px;
border: 2px solid #fff;
margin-top: -5px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* LOCATION
------------------------------------------------------------------------------------------------------------------------------- */
.location:before {
left: 6px;
width: 2px;
height: 2px;
border: 3px solid #555;
border-bottom: 0;
margin-top: -9px;
background: #fff;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
.location:after {
left: 6px;
border-width: 12px 4px 0;
border-style: solid;
border-color: #555 transparent;
margin-top: -4px;
}
/* INFO
------------------------------------------------------------------------------------------------------------------------------- */
.info {
color: #2385BA;
}
.info:before {
content: "i";
left: 3px;
width: 16px;
height: 16px;
margin-top: -8px;
font-size: 14px;
font-weight: bold;
font-style: italic;
line-height: 15px;
text-align: center;
color: #fff;
background: #2385BA;
/* css3 */
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
/* HELP
------------------------------------------------------------------------------------------------------------------------------- */
.help {
color: #2385BA;
}
.help:before {
content: "?";
left: 3px;
width: 16px;
height: 16px;
margin-top: -8px;
font-size: 14px;
font-weight: bold;
line-height: 15px;
text-align: center;
color: #fff;
background: #2385BA;
/* css3 */
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
/* PIE CHART
------------------------------------------------------------------------------------------------------------------------------- */
.pie {
color: #9D2CA3;
}
.pie:before {
left: 3px;
border: 8px solid #9D2CA3;
margin-top: -7px;
/* css3 */
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
.pie:after {
left: 11px;
width: 8px;
height: 8px;
border-width: 0 0 2px 2px;
border-style: solid;
border-color: #fff;
margin-top: -8px;
background: #9D2CA3;
/* css3 */
-webkit-border-top-right-radius: 16px;
-moz-border-radius: 0 16px 0 0;
border-radius: 0 16px 0 0;
}
/* SUCCESS
------------------------------------------------------------------------------------------------------------------------------- */
.success {
color: #7F913C;
}
.success:before {
left: 3px;
width: 16px;
height: 16px;
margin-top: -8px;
/* css3 */
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
background: #7F913C;
}
.success:after {
left: 8px;
width: 3px;
height: 8px;
border-width: 0 2px 2px 0;
border-style: solid;
border-color: #fff;
margin-top: -6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Alternative style */
.success-alt {
color: #7F913C;
}
.success-alt:before {
left: 6px;
width: 5px;
height: 12px;
border-width: 0 5px 5px 0;
border-style: solid;
border-color: #7F913C;
margin-top: -11px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
/* WARNING
------------------------------------------------------------------------------------------------------------------------------- */
.warning:before {
content: "!";
z-index: 2;
left: 8px;
margin-top: -8px;
font-size: 14px;
font-weight: bold;
color: #000;
}
.warning:after {
z-index: 1;
border-width: 0 11px 18px;
border-style: solid;
border-color: #F8D201 transparent;
margin-top: -10px;
background: transparent;
}
/* DENIED
------------------------------------------------------------------------------------------------------------------------------- */
.denied {
color: #C00000;
}
.denied:before {
left: 3px;
width: 10px;
height: 10px;
border: 3px solid #C00000;
margin-top: -8px;
background: transparent;
/* css3 */
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
.denied:after {
left: 6px;
width: 11px;
height: 3px;
margin-top: -2px;
background: #C00000;
/* css3 */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* ----------------------------------------------------------------------------------------------------------------------------
== MEDIA CONTROLS
** ---------------------------------------------------------------------------------------------------------------------------- */
/* POWER
------------------------------------------------------------------------------------------------------------------------------- */
.power a:before {
left: 1px;
width: 10px;
height: 10px;
border: 2px solid #c55500;
margin-top: -6px;
background: transparent;
/* css3 */
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
.power a:after {
left: 6px;
width: 2px;
height: 7px;
border: 1px solid #fff;
margin: -8px 0 0;
background: #c55500;
}
.power a:hover:before, .power a:focus:before, .power a:active:before {
border-color: #730800;
background: transparent;
}
.power a:hover:after, .power a:focus:after, .power a:active:after {
background: #730800;
}
/* PLAY
------------------------------------------------------------------------------------------------------------------------------- */
.play a:before {
width: 16px;
height: 16px;
/* css3 */
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
.play a:after {
left: 7px;
border: 4px solid transparent;
border-left-color: #fff;
margin-top: -4px;
background: transparent;
}
/* Alternative style */
.play-alt a:before {
left: 2px;
border: 8px solid transparent;
border-width: 8px 12px;
border-left-color: #c55500;
margin-top: -8px;
background: transparent;
}
.play-alt a:hover:before, .play-alt a:focus:before, .play-alt a:active:before {
border-left-color: #730800;
background: transparent;
}
/* STOP
------------------------------------------------------------------------------------------------------------------------------- */
.stop a:before {
width: 16px;
height: 16px;
/* css3 */
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
.stop a:after {
left: 5px;
width: 6px;
height: 6px;
margin-top: -3px;
background: #fff;
}
/* Alternative style */
.stop-alt a:before {
left: 1px;
width: 14px;
height: 14px;
margin-top: -7px;
}
/* PAUSE
------------------------------------------------------------------------------------------------------------------------------- */
.pause a:before {
width: 16px;
height: 16px;
/* css3 */
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
.pause a:after {
left: 5px;
width: 2px;
height: 8px;
border: 2px solid #fff;
border-width: 0 2px;
margin-top: -4px;
background: transparent;
}
/* Alternative style */
.pause-alt a:before {
left: 2px;
width: 4px;
height: 14px;
border: 4px solid #c55500;
border-width: 0 4px;
margin-top: -7px;
background: transparent;
}
.pause-alt a:hover:before,
.pause-alt a:focus:before,
.pause-alt a:active:before {
border-color: #730800;
background: transparent;
}
/* VOLUME
------------------------------------------------------------------------------------------------------------------------------- */
.volume a:before {
left: -2px;
border: 7px solid transparent;
border-right-color: #c55500;
margin-top: -7px;
background: transparent;
}
.volume a:after {
left: 4px;
width: 4px;
height: 6px;
margin-top: -3px;
}
.volume a:hover:before, .volume a:focus:before, .volume a:active:before {
border-right-color: #730800;
background: transparent;
}
.volume a:hover:after, .volume a:focus:after, .volume a:active:after {
background: #730800;
}
/* Volume on */
.volume-on:before {
left: 12px;
width: 6px;
height: 6px;
margin-top: -5px;
border: 4px double #c55500;
border-width: 4px 4px 0 0;
/* css3 */
-webkit-border-radius: 0 15px 0 0;
-moz-border-radius: 0 15px 0 0;
border-radius: 0 15px 0 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.volume-on:hover:before {
border-color: #730800;
}
/* Mute */
.mute:before {
width: 16px;
height: 16px;
border: 1px solid #c55500;
margin-top: -9px;
/* css3 */
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
.mute:after {
width: 18px;
border-top: 1px solid #c55500;
/* css3 */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.mute:hover:before, .mute:hover:after {
border-color: #730800;
}
/* Volume up/down */
.volume-up:before {
left: 16px;
width: 2px;
height: 8px;
margin-top: -4px;
background: #c55500;
}
.volume-up:after, .volume-down:after {
left: 13px;
width: 8px;
height: 2px;
margin-top: -1px;
background: #c55500;
}
.volume-up:hover:before, .volume-up:hover:after, .volume-down:hover:after {
background: #730800;
}
/* MIC
------------------------------------------------------------------------------------------------------------------------------- */
.mic a:before {
left: 6px;
width: 7px;
height: 12px;
margin-top: -9px;
/* css3 */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.mic a:after {
left: 4px;
width: 9px;
height: 6px;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #c55500;
margin-top: -2px;
background: transparent;
/* css3 */
-webkit-border-bottom-right-radius: 11px;
-webkit-border-bottom-left-radius: 11px;
-moz-border-radius: 0 0 11px 11px;
border-radius: 0 0 11px 11px;
}
.mic:before, .mic:after {
left: 9px;
width: 1px;
height: 4px;
margin-top: 4px;
background: #c55500;
}
.mic:after {
left: 6px;
width: 7px;
height: 1px;
margin-top: 7px;
}
.mic a:hover:after, .mic a:focus:after, .mic a:active:after {
border-color: #730800;
}
.mic:hover:before, .mic:hover:after {
background: #730800;
}
/* FAST FORWARD
------------------------------------------------------------------------------------------------------------------------------- */
.fforward a:before {
left: 1px;
border: 5px solid transparent;
border-width: 5px 7px;
border-left-color: #c55500;
margin-top: -4px;
background: transparent;
}
.fforward a:after {
left: 7px;
border: 5px solid transparent;
border-width: 5px 7px;
border-left-color: #c55500;
margin-top: -4px;
background: transparent;
}
.fforward a:hover:before, .fforward a:focus:before, .fforward a:active:before {
border-left-color: #730800;
background: transparent;
}
.fforward a:hover:after, .fforward a:focus:after, .fforward a:active:after {
border-left-color: #730800;
}
/* FAST REWIND
------------------------------------------------------------------------------------------------------------------------------- */
.frewind a:before {
left: -6px;
border: 5px solid transparent;
border-width: 5px 7px;
border-right-color: #c55500;
margin-top: -4px;
background: transparent;
}
.frewind a:after {
border: 5px solid transparent;
border-width: 5px 7px;
border-right-color: #c55500;
margin-top: -4px;
background: transparent;
}
.frewind a:hover:before, .frewind a:focus:before, .frewind a:active:before {
border-right-color: #730800;
background: transparent;
}
.frewind a:hover:after, .frewind a:focus:after, .frewind a:active:after {
border-right-color: #730800;
}
/* JUMP FORWARD
------------------------------------------------------------------------------------------------------------------------------- */
.next a:before {
left: 9px;
width: 2px;
height: 10px;
margin-top: -4px;
}
.next a:after {
left: 2px;
border: 5px solid transparent;
border-width: 5px 7px;
border-left-color: #c55500;
margin-top: -4px;
background: transparent;
}
.next a:hover:after, .next a:focus:after, .next a:active:after {
border-left-color: #730800;
}
/* JUMP REWIND
------------------------------------------------------------------------------------------------------------------------------- */
.prev a:before {
left: 2px;
width: 2px;
height: 10px;
margin-top: -4px;
}
.prev a:after {
left: -3px;
border: 5px solid transparent;
border-width: 5px 7px;
border-right-color: #c55500;
margin-top: -4px;
background: transparent;
}
.prev a:hover:after, .prev a:focus:after, .prev a:active:after {
border-right-color: #730800;
}
/* POP-OUT WINDOW
------------------------------------------------------------------------------------------------------------------------------- */
.pop a:before, .pop a:after {
width: 12px;
height: 8px;
border: 1px solid #c55500;
margin-top: -4px;
background: #fff;
}
.pop a:after {
left: 3px;
margin-top: -7px;
}
.pop a:hover:before,
.pop a:focus:before,
.pop a:active:before,
.pop a:hover:after,
.pop a:focus:after,
.pop a:active:after {
border-color: #730800;
background: #fff;
}
/* ENLARGE
------------------------------------------------------------------------------------------------------------------------------- */
.enlarge a:before {
width: 16px;
height: 14px;
margin-top: -7px;
}
.enlarge a:after {
left: 1px;
width: 7px;
height: 6px;
margin-top: -6px;
background: #fff;
}
/* REPEAT
------------------------------------------------------------------------------------------------------------------------------- */
.repeat a:before {
left: 1px;
width: 9px;
height: 9px;
border: 3px solid #c55500;
margin-top: -6px;
background: transparent;
/* css3 */
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
.repeat a:after {
left: 9px;
border: 4px solid #fff;
border-width: 5px 2px 5px 5px;
border-left-color: #c55500;
margin: -9px 0 0;
background: transparent;
}
.repeat a:hover:before, .repeat a:focus:before, .repeat a:active:before {
border-color: #730800;
background: transparent;
}
.repeat a:hover:after, .repeat a:focus:after, .repeat a:active:after {
border-left-color: #730800;
}
/* EXPAND
------------------------------------------------------------------------------------------------------------------------------- */
.expand a:before {
z-index: -2;
left: 1px;
width: 5px;
height: 0;
border-width: 7px 7px 0;
border-style: solid;
border-color: transparent #c55500;
margin-top: -4px;
background: transparent;
/* css3 */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.expand a:after {
left: 5px;
width: 8px;
height: 8px;
border: 3px solid #c55500;
border-width: 3px 0 0 3px;
margin-top: -6px;
background: transparent;
}
.expand a:hover:before, .expand a:focus:before, .expand a:active:before {
border-color: transparent #730800;
background: transparent;
}
.expand a:hover:after, .expand a:focus:after, .expand a:active:after {
border-color: #730800;
}
/* SHRINK
------------------------------------------------------------------------------------------------------------------------------- */
.shrink a:before {
z-index: -2;
left: 1px;
width: 5px;
height: 0;
border-width: 0 7px 7px;
border-style: solid;
border-color: transparent #c55500;
margin-top: -4px;
background: transparent;
/* css3 */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.shrink a:after {
left: 5px;
width: 8px;
height: 8px;
border: 3px solid #c55500;
border-width: 0 3px 3px 0;
margin-top: -6px;
background: transparent;
}
.shrink a:hover:before, .shrink a:focus:before, .shrink a:active:before {
border-color: transparent #730800;
background: transparent;
}
.shrink a:hover:after, .shrink a:focus:after, .shrink a:active:after {
border-color: #730800;
}
/* TOGGLE SIZE
------------------------------------------------------------------------------------------------------------------------------- */
.toggle-size a:before {
left: 2px;
border-width: 6px;
border-style: solid;
border-color: #c55500 transparent transparent #c55500;
background: transparent;
margin-top: -7px;
}
.toggle-size a:after {
left: 7px;
border-width: 4px;
border-style: solid;
border-color: transparent #c55500 #c55500 transparent;
margin-top: -2px;
background: transparent;
}
.toggle-size a:hover:before,
.toggle-size a:focus:before,
.toggle-size a:active:before {
border-color: #730800 transparent transparent #730800;
background: transparent;
}
.toggle-size a:hover:after,
.toggle-size a:focus:after,
.toggle-size a:active:after {
border-color: transparent #730800 #730800 transparent;
}
/* FULL SCREEN
------------------------------------------------------------------------------------------------------------------------------- */
.full:before, .full:after {
z-index: 1;
left: 8px;
width: 3px;
height: 8px;
border: 5px solid #c55500;
border-width: 5px 0;
margin-top: -8px;
/* css3 */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.full:after {
/* css3 */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.full:hover:before, .full:hover:after {
border-color: #730800;
}
.full a:before, .full a:after {
z-index: 10;
width: 4px;
height: 0;
border-width: 0 7px 7px;
border-style: solid;
border-color: transparent #c55500;
margin-top: -8px;
background: transparent;
}
.full a:after {
border-width: 7px 7px 0;
margin-top: 3px;
}
.full a:hover:before,
.full a:focus:before,
.full a:active:before,
.full a:hover:after,
.full a:focus:after,
.full a:active:after {
border-color: transparent #730800;
background: transparent;
}
/* SHRINK
------------------------------------------------------------------------------------------------------------------------------- */
.exit:before, .exit:after {
z-index: 1;
top: 50%;
left: 8px;
width: 3px;
height: 14px;
border: 5px solid #c55500;
border-width: 5px 0;
margin-top: -12px;
/* css3 */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.exit:after {
/* css3 */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.exit:hover:before, .exit:hover:after {
border-color: #730800;
}
.exit a:before, .exit a:after {
z-index: 10;
left: 2px;
width: 6px;
border-width: 5px;
border-style: solid;
border-color: transparent #c55500;
margin-top: -5px;
background: transparent;
/* css3 */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.exit a:after {
/* css3 */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.exit a:hover:before,
.exit a:focus:before,
.exit a:active:before,
.exit a:hover:after,
.exit a:focus:after,
.exit a:active:after {
border-color: transparent #730800;
background: transparent;
}
/* EJECT
------------------------------------------------------------------------------------------------------------------------------- */
.eject a:before {
left: 1px;
width: 14px;
height: 2px;
margin-top: 4px;
}
.eject a:after {
left: 1px;
border: 8px solid transparent;
border-width: 8px 7px;
border-bottom-color: #c55500;
margin-top: -13px;
background: transparent;
}
.eject a:hover:after, .eject a:focus:after, .eject a:active:after {
border-bottom-color: #730800;
}
<div id="icons" class="container">
<h2><strong>84 GUI icons</strong> created from semantic HTML.</h2>
<div class="section">
<h3>User interaction</h3>
<ul>
<li class="search"><a href="#non">Search</a></li>
<li class="add"><a href="#non">Add</a></li>
<li class="remove"><a href="#non">Remove</a></li>
<li class="delete"><a href="#non">Delete</a></li>
<li class="add-alt"><a href="#non">Add</a></li>
<li class="remove-alt"><a href="#non">Remove</a></li>
<li class="delete-alt"><a href="#non">Delete</a></li>
<li class="report"><a href="#non">Report</a></li>
<li class="trash"><a href="#non">Trash</a></li>
<li class="lock"><a href="#non">Lock</a></li>
<li class="unlock"><a href="#non">Unlock</a></li>
<li class="update"><a href="#non">Edit</a></li>
<li class="save"><a href="#non">Save</a></li>
<li class="edit"><a href="#non">Edit</a></li>
<li class="download"><a href="#non">Download</a></li>
<li class="arrow forward"><a href="#non">Forward</a></li>
<li class="arrow back"><a href="#non">Back</a></li>
<li class="arrow up"><a href="#non">Up</a></li>
<li class="arrow down"><a href="#non">Down</a></li>
<li class="arrow-alt forward"><a href="#non">Forward</a></li>
<li class="arrow-alt back"><a href="#non">Back</a></li>
<li class="arrow-alt up"><a href="#non">Up</a></li>
<li class="arrow-alt down"><a href="#non">Down</a></li>
<li class="arrow-alt2 forward"><a href="#non">Forward</a></li>
<li class="arrow-alt2 back"><a href="#non">Back</a></li>
<li class="arrow-alt2 up"><a href="#non">Up</a></li>
<li class="arrow-alt2 down"><a href="#non">Down</a></li>
<li class="comment"><a href="#non">Comment</a></li>
<li class="like"><a href="#non">Like</a></li>
<li class="retweet"><a href="#non">Retweet</a></li>
</ul>
</div>
<div class="section">
<h3>Miscellaneous</h3>
<ul>
<li class="home"><a href="#non">Home</a></li>
<li class="photo"><a href="#non">Photo</a></li>
<li class="video"><a href="#non">Video</a></li>
<li class="music"><a href="#non">Music</a></li>
<li class="call"><a href="#non">Call</a></li>
<li class="call call-on"><a href="#non">Call in progress</a></li>
<li class="tags"><a href="#non">Tags</a></li>
<li class="rss"><a href="#non">RSS</a></li>
<li class="email"><a href="#non">Email</a></li>
<li class="profile"><a href="#non">Profile</a></li>
<li class="file"><a href="#non">File</a></li>
<li class="folder"><a href="#non">Folder</a></li>
<li class="list"><a href="#non">List view</a></li>
<li class="permalink"><a href="#non">Permalink</a></li>
<li class="history"><a href="#non">History</a></li>
<li class="tools"><a href="#non">Tools</a></li>
<li class="player">MP3 Player</li>
<li class="headphones">Headphones</li>
<li class="ribbon">Ribbon</li>
<li class="views">Views</li>
<li class="location">Location</li>
<li class="info">Info</li>
<li class="help">Help</li>
<li class="pie">Pie chart</li>
<li class="success">Success</li>
<li class="success-alt">Success (alt)</li>
<li class="warning">Warning</li>
<li class="denied">Denied</li>
</ul>
</div>
<div class="section">
<h3>Media controls</h3>
<ul>
<li class="power"><a href="#non">Power</a></li>
<li class="play"><a href="#non">Play</a></li>
<li class="stop"><a href="#non">Stop</a></li>
<li class="pause"><a href="#non">Pause</a></li>
<li class="play-alt"><a href="#non">Play</a></li>
<li class="stop-alt"><a href="#non">Stop</a></li>
<li class="pause-alt"><a href="#non">Pause</a></li>
<li class="volume"><a href="#non">Volume</a></li>
<li class="volume volume-on"><a href="#non">Volume on</a></li>
<li class="volume mute"><a href="#non">Mute</a></li>
<li class="volume volume-up"><a href="#non">Volume up</a></li>
<li class="volume volume-down"><a href="#non">Volume down</a></li>
<li class="mic"><a href="#non">Mic</a></li>
<li class="fforward"><a href="#non">Fast forward</a></li>
<li class="frewind"><a href="#non">Fast rewind</a></li>
<li class="next"><a href="#non">Next track</a></li>
<li class="prev"><a href="#non">Previous track</a></li>
<li class="repeat"><a href="#non">Repeat</a></li>
<li class="expand"><a href="#non">Expand</a></li>
<li class="shrink"><a href="#non">Shrink</a></li>
<li class="toggle-size"><a href="#non">Toggle video size</a></li>
<li class="pop"><a href="#non">Pop out</a></li>
<li class="enlarge"><a href="#non">Enlarge</a></li>
<li class="full"><a href="#non">Full-screen</a></li>
<li class="exit"><a href="#non">Exit full-screen</a></li>
<li class="eject"><a href="#non">Eject</a></li>
</ul>
</div>
</div>
Square Pure CSS Icon SET
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.container > div {
margin: 5px;
}
.base {
font-size: 100px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
cursor: pointer;
height: 1em;
width: 1em;
color: #333;
border: 1px solid currentColor;
}
.search:before {
content: '';
height: 0.25em;
width: 0.25em;
position: absolute;
left: 0.25em;
border: 0.06em solid #666;
border-radius: 50%;
}
.search:after {
content: '';
height: 0.25em;
width: 0.075em;
background: #666;
position: absolute;
transform: rotate(-50deg);
top: 0.53em;
left: 0.6em;
border-radius: 30%;
}
.search:hover:before {
border-color: #e91e63;
}
.search:hover:after {
background: #e91e63;
}
.cross:before {
content: '';
height: 0.5em;
width: 0.075em;
background: #666;
position: absolute;
transform: rotate(-45deg);
}
.cross:after {
content: '';
height: 0.5em;
width: 0.075em;
background: #666;
position: absolute;
transform: rotate(45deg);
}
.cross:hover:before,
.cross:hover:after {
background: #e91e63;
}
.tick:before {
content: '';
height: 0.44em;
width: 0.075em;
background: #666;
position: absolute;
top: 0.28em;
left: 0.56em;
transform: rotate(45deg);
}
.tick:after {
content: '';
height: 0.25em;
width: 0.075em;
background: #666;
position: absolute;
top: 0.44em;
left: 0.35em;
transform: rotate(-45deg);
}
.tick:hover:before,
.tick:hover:after {
background: #e91e63;
}
.menu:before {
content: '';
box-shadow: 0px 0.065em 0px 0px #666, 0px 0.18em 0 0 #666, 0px 0.3em 0 0 #666;
height: 0.065em;
width: 0.45em;
position: absolute;
top: 0.3em;
}
.menu:hover:before {
box-shadow: 0px 0.065em 0px 0px #e91e63, 0px 0.18em 0 0 #e91e63, 0px 0.3em 0 0 #e91e63;
}
.phone:after {
content: '';
height: 0.2em;
width: 0.18em;
border-radius: 40%;
box-shadow: 0.3em 0.08em 0 0 #666, 0.21em 0.42em 0 0 #666;
position: absolute;
transform: rotate(-53deg);
top: 0.45em;
left: 0.06em;
}
.phone:before {
content: '';
height: 0.46em;
width: 0.08em;
position: absolute;
background-color: #666;
top: 0.32em;
left: 0.42em;
transform: rotate(-42deg);
border-radius: 40%;
}
.phone:hover:before {
background-color: #e91e63;
}
.phone:hover:after {
box-shadow: 0.3em 0.08em 0 0 #e91e63, 0.21em 0.42em 0 0 #e91e63;
}
.lock:before {
content: '';
height: 0.38em;
width: 0.48em;
background: #666;
position: absolute;
top: 0.4em;
border-radius: 12%;
}
.lock:after {
content: '';
height: 0.15em;
width: 0.15em;
border: 0.06em solid #666;
border-bottom: 0;
position: absolute;
top: 0.2em;
left: 0.36em;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
.lock i.part {
height: 0.12em;
width: 0.12em;
background: #fff;
z-index: 2;
border-radius: 50%;
position: absolute;
top: 0.5em;
}
.lock:hover:before {
background: #e91e63;
}
.lock:hover:after {
border-color: #e91e63;
}
.lock.lock-open:after {
transform: rotate(20deg);
left: 0.4em;
top: 0.19em;
}
.home:before {
content: '';
width: 0;
height: 0;
border-left: 0.38em solid transparent;
border-right: 0.38em solid transparent;
border-bottom: 0.26em solid #666;
position: absolute;
top: 0.25em;
}
.home:after {
content: '';
height: 0.18em;
width: 0.1em;
background: #fff;
position: absolute;
border-top: 0.1em solid #666;
border-right: 0.2em solid #666;
border-left: 0.2em solid #666;
border-bottom: 0;
top: 0.51em;
}
.home:hover:before {
border-bottom: 0.26em solid #e91e63;
}
.home:hover:after {
border-top: 0.1em solid #e91e63;
border-right: 0.2em solid #e91e63;
border-left: 0.2em solid #e91e63;
}
.logout:before {
content: '';
height: 0.32em;
width: 0.07em;
border-right-width: 0.09em;
border-left-width: 0.09em;
border-bottom: 0;
border-top: 0;
border-style: solid;
border-color: #fff;
position: absolute;
top: 0.3em;
left: 0.37em;
background: #666;
z-index: 2;
}
.logout:after {
content: '';
height: 0.35em;
width: 0.35em;
position: absolute;
border: 0.064em solid #666;
border-radius: 50%;
top: 0.35em;
}
.logout:hover:before {
background: #e91e63;
}
.logout:hover:after {
border-color: #e91e63;
}
.edit:before {
content: '';
height: 0.4em;
width: 0.15em;
background: transparent;
position: absolute;
top: -0.09em;
left: 0.85em;
box-shadow: 0 0.57em 0 0 #666, 0 0.13em 0 0 #666;
transform: rotate(45deg);
}
.edit:after {
content: '';
width: 0;
height: 0;
border-top: 0.09em solid transparent;
border-right: 0.12em solid #666666;
border-bottom: 0.09em solid transparent;
border-radius: 2em;
position: absolute;
left: 0.25em;
transform: rotate(315deg);
top: 0.64em;
}
.edit:hover:after {
border-right: 0.12em solid #e91e63;
}
.edit:hover:before {
box-shadow: 0 0.57em 0 0 #e91e63, 0 0.13em 0 0 #e91e63;
}
.mail_outline:before {
content: '';
height: 0.35em;
width: 0.45em;
border: 0.05em solid #666;
border-radius: 0.08em;
}
.mail_outline:after {
content: '';
position: absolute;
border: solid #666;
border-width: 0 0.05em 0.05em 0;
display: inline-block;
padding: 0.15em;
top: 0.17em;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
border-radius: 0.08em;
}
.mail_outline:hover:before {
border: 0.05em solid #e91e63;
}
.mail_outline:hover:after {
border-color: #e91e63;
}
.mail:before {
content: '';
height: 0.35em;
width: 0.45em;
border: 0.05em solid #666;
border-radius: 0.08em;
background: #666;
}
.mail:after {
content: '';
position: absolute;
border: solid #fff;
border-width: 0 0.05em 0.05em 0;
display: inline-block;
padding: 0.15em;
top: 0.17em;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
border-radius: 0.08em;
}
.mail:hover:before {
border: 0.05em solid #e91e63;
background: #e91e63;
}
.bell_outline:before {
content: '';
position: absolute;
top: 0.3em;
height: 0.38em;
width: 0.3em;
border: 0.05em solid #666;
border-bottom: none;
border-top-right-radius: 0.2em;
border-top-left-radius: 0.2em;
z-index: 2;
}
.bell_outline:after {
content: '';
position: absolute;
height: 0em;
width: 0.45em;
border: 0.029em solid #666;
border-top-right-radius: 0.1em;
border-top-left-radius: 0.1em;
top: 0.71em;
z-index: 0;
}
.bell_outline i.part:before {
content: '';
position: absolute;
top: 0.23em;
left: 0.43em;
height: 0.1em;
width: 0.12em;
background: #666;
border-radius: 0.1em;
}
.bell_outline i.part:after {
content: '';
position: absolute;
top: 0.78em;
left: 0.44em;
height: 0.08em;
width: 0.14em;
background: #666;
border-bottom-right-radius: 0.1em;
border-bottom-left-radius: 0.1em;
}
.bell_outline:hover:after {
border-color: #e91e63;
}
.bell_outline:hover:before {
border-color: #e91e63;
}
.bell_outline:hover .part:after {
background: #e91e63;
}
.bell_outline:hover .part:before {
background: #e91e63;
}
.bell:before {
content: '';
position: absolute;
top: 0.3em;
height: 0.38em;
width: 0.3em;
background: #666;
border: 0.05em solid #666;
border-bottom: none;
border-top-right-radius: 0.2em;
border-top-left-radius: 0.2em;
z-index: 2;
}
.bell:after {
content: '';
position: absolute;
height: 0em;
width: 0.45em;
border: 0.029em solid #666;
border-top-right-radius: 0.1em;
border-top-left-radius: 0.1em;
top: 0.71em;
z-index: 0;
}
.bell i.part:before {
content: '';
position: absolute;
top: 0.23em;
left: 0.43em;
height: 0.1em;
width: 0.12em;
background: #666;
border-radius: 0.1em;
}
.bell i.part:after {
content: '';
position: absolute;
top: 0.78em;
left: 0.44em;
height: 0.08em;
width: 0.14em;
background: #666;
border-bottom-right-radius: 0.1em;
border-bottom-left-radius: 0.1em;
}
.bell:hover:after {
border-color: #e91e63;
}
.bell:hover:before {
background: #e91e63;
border-color: #e91e63;
}
.bell:hover .part:after {
background: #e91e63;
}
.bell:hover .part:before {
background: #e91e63;
}
.trash_outline:before {
content: '';
position: absolute;
top: 0.2em;
border: 0.05em solid #fff;
border-bottom-width: 0.01em;
border-top-left-radius: 0.9em;
border-top-right-radius: 0.9em;
height: 0.07em;
background: #666;
width: 0.3em;
box-shadow: 0px 0.05em 0px 0px #666;
}
.trash_outline:after {
content: '';
width: 0.25em;
height: 0.4em;
border: 0.05em solid #666;
border-bottom-left-radius: 0.08em;
border-bottom-right-radius: 0.08em;
}
.trash_outline:hover:before {
background: #e91e63;
box-shadow: 0px 0.05em 0px 0px #e91e63;
}
.trash_outline:hover:after {
border-color: #e91e63;
}
.trash:before {
content: '';
position: absolute;
top: 0.2em;
border: 0.05em solid #fff;
border-bottom-width: 0.01em;
border-top-left-radius: 0.9em;
border-top-right-radius: 0.9em;
height: 0.07em;
background: #666;
width: 0.3em;
box-shadow: 0px 0.05em 0px 0px #666;
}
.trash:after {
content: '';
width: 0.25em;
height: 0.4em;
border: 0.05em solid #666;
background: #666;
border-bottom-left-radius: 0.08em;
border-bottom-right-radius: 0.08em;
}
.trash:hover:before {
background: #e91e63;
box-shadow: 0px 0.05em 0px 0px #e91e63;
}
.trash:hover:after {
border-color: #e91e63;
background: #e91e63;
}
.eye:before {
content: '';
height: 0.3em;
width: 0.3em;
border: 0.041em solid #666;
border-radius: 0.02em 75%;
transform: rotate(135deg);
}
.eye:after {
content: '';
height: 0.095em;
width: 0.095em;
background: white;
border-radius: 50%;
position: absolute;
top: 0.4em;
left: 0.42em;
box-shadow: 0.03em 0.04em 0 0.06em #666;
}
.eye:hover:before {
border-color: #e91e63;
}
.eye:hover:after {
box-shadow: 0.03em 0.04em 0 0.06em #e91e63;
}
.eye_slash:before {
content: '';
height: 0.3em;
width: 0.3em;
border: 0.041em solid #666;
border-radius: 0.02em 75%;
transform: rotate(135deg);
}
.eye_slash:after {
content: '';
height: 0.095em;
width: 0.095em;
background: white;
border-radius: 50%;
position: absolute;
top: 0.4em;
left: 0.49em;
box-shadow: -0.03em 0.04em 0 0.06em #666;
}
.eye_slash:hover:before {
border-color: #e91e63;
}
.eye_slash:hover:after {
box-shadow: -0.03em 0.04em 0 0.06em #e91e63;
}
.eye_slash .part {
position: absolute;
left: 0.52em;
top: 0.23em;
height: 0.5em;
width: 0.02em;
border-right: 0.04em solid #666;
transform: rotate(145deg);
box-shadow: 0.03em 0.01em 0 0.01em #fff;
z-index: 2;
}
.eye_slash:hover .part {
border-right: 0.04em solid #e91e63;
}
.error_outline:before {
content: '';
height: 0.38em;
width: 0.38em;
position: absolute;
border: 0.05em solid #666;
border-radius: 50%;
top: 0.3em;
}
.error_outline:after {
content: 'i';
height: 0.2em;
width: 0.06em;
font-size: 0.35em;
background: transparent;
position: absolute;
font-weight: bold;
top: 1.89em;
left: 1.49em;
color: #666;
font-family: Roboto;
transform: rotate(180deg);
}
.error_outline:hover:before {
border-color: #e91e63;
}
.error_outline:hover:after {
color: #e91e63;
}
.error:before {
content: '';
height: 0.38em;
width: 0.38em;
position: absolute;
border: 0.05em solid #666;
background: #666;
border-radius: 50%;
top: 0.3em;
}
.error:after {
content: 'i';
height: 0.2em;
width: 0.06em;
font-size: 0.35em;
background: transparent;
position: absolute;
font-weight: bold;
top: 1.89em;
left: 1.49em;
color: #fff;
font-family: Roboto;
transform: rotate(180deg);
}
.error:hover:before {
border-color: #e91e63;
background: #e91e63;
}
.settings:before {
content: '';
height: 0.5em;
width: 0.15em;
background: #666;
position: absolute;
transform: rotate(-60deg);
border-radius: 0.06em;
}
.settings:after {
content: '';
height: 0.5em;
width: 0.15em;
background: #666;
position: absolute;
transform: rotate(60deg);
border-radius: 0.06em;
}
.settings .part {
height: 0.5em;
width: 0.15em;
border-radius: 0.06em;
background: #666;
border: none;
position: absolute;
}
.settings .part:before {
content: '';
height: 0.13em;
width: 0.13em;
position: absolute;
border: 0.12em solid #666;
background: #fff;
border-radius: 50%;
top: 0.076em;
left: -0.11em;
z-index: 2;
}
.settings:hover:before,
.settings:hover:after {
background: #e91e63;
}
.settings:hover .part {
background: #e91e63;
}
.settings:hover .part:before {
border-color: #e91e63;
}
.avatar_outline:before {
content: '';
height: 0.16em;
width: 0.16em;
position: absolute;
border: 0.05em solid #666;
border-radius: 50%;
top: 0.18em;
z-index: 2;
}
.avatar_outline:after {
content: '';
height: 0.15em;
width: 0.38em;
position: absolute;
border: 0.05em solid #666;
border-radius: 50% 50% 0 0;
top: 0.45em;
z-index: -1;
}
.avatar_outline:hover:before,
.avatar_outline:hover:after {
border-color: #e91e63;
}
.avatar:before {
content: '';
height: 0.16em;
width: 0.16em;
position: absolute;
border: 0.05em solid #666;
background: #666;
border-radius: 50%;
top: 0.18em;
z-index: 2;
}
.avatar:after {
content: '';
height: 0.15em;
width: 0.38em;
position: absolute;
border: 0.05em solid #666;
background: #666;
border-radius: 50% 50% 0 0;
top: 0.45em;
z-index: -1;
}
.avatar:hover:before,
.avatar:hover:after {
border-color: #e91e63;
background: #e91e63;
}
.chat_outline:before {
content: '';
height: 0.31em;
width: 0.41em;
border: 0.042em solid #666;
position: absolute;
top: 0.2em;
border-radius: 12%;
}
.chat_outline:after {
content: 'v';
font-family: sans-serif;
font-size: 0.35em;
font-weight: bold;
color: #666;
position: absolute;
left: 0.6em;
transform: rotate(20deg);
top: 1.12em;
z-index: -1;
}
.chat_outline .part:before {
content: '';
box-shadow: 0px 0.04em 0px 0px #666, -1px 0.14em 0px -1px #666, -1px 0.23em 0px -1px #666;
height: 0.065em;
width: 0.3em;
position: absolute;
top: 0.22em;
left: 0.36em;
}
.chat_outline:hover:before {
border-color: #e91e63;
}
.chat_outline:hover:after {
color: #e91e63;
}
.chat_outline:hover .part:before {
box-shadow: 0px 0.04em 0px 0px #e91e63, -1px 0.14em 0px -1px #e91e63, -1px 0.23em 0px -1px #e91e63;
}
.chat:before {
content: '';
height: 0.4em;
width: 0.5em;
background: #666;
position: absolute;
top: 0.2em;
border-radius: 12%;
}
.chat:after {
content: '';
width: 0;
height: 0;
border-top: 0.12em solid transparent;
border-left: 0.16em solid #666;
border-bottom: 0.16em solid transparent;
border-radius: 0.2em;
position: absolute;
left: 0.25em;
top: 0.47em;
z-index: -1;
}
.chat .part:before {
content: '';
box-shadow: 0px 0.04em 0px 0px #fff, -1px 0.14em 0px -1px #fff, -1px 0.23em 0px -1px #fff;
height: 0.065em;
width: 0.3em;
position: absolute;
top: 0.22em;
left: 0.36em;
}
.chat:hover:before {
background: #e91e63;
}
.chat:hover:after {
border-left-color: #e91e63;
}
.filter:before {
content: '';
width: 0;
height: 0;
position: absolute;
top: 0.25em;
border-left: 0.24em solid transparent;
border-right: 0.24em solid transparent;
border-top: 0.28em solid #666;
border-radius: 2em;
}
.filter:after {
content: '';
width: 0.34em;
height: 0.09em;
transform: rotate(90deg) skew(35deg);
background: #666;
z-index: -1;
}
.filter:hover:before {
border-top-color: #e91e63;
}
.filter:hover:after {
background: #e91e63;
}
.map_marker:before {
content: '';
width: 0.4em;
height: 0.4em;
background: #666;
position: absolute;
border-radius: 60% 50% 60% 0;
transform: rotate(-45deg);
top: 0.2em;
}
.map_marker:after {
content: '';
width: 0.15em;
height: 0.15em;
background: #fff;
z-index: 2;
position: absolute;
top: 0.32em;
border-radius: 50%;
}
.map_marker:hover:before {
background: #e91e63;
}
.play:before {
content: '';
width: 0;
height: 0;
border-top: 0.2em solid transparent;
border-left: 0.3em solid #666;
border-bottom: 0.2em solid transparent;
}
.play:hover:before {
border-left-color: #e91e63;
}
.pause:before {
content: '';
box-shadow: 0px 0.15em 0px 0px #666, 0px 0.3em 0 0 #666;
height: 0.1em;
width: 0.35em;
position: absolute;
left: 0.53em;
transform: rotate(90deg);
}
.pause:hover:before {
box-shadow: 0px 0.15em 0px 0px #e91e63, 0px 0.3em 0 0 #e91e63;
}
.stop:before {
content: '';
height: 0.3em;
width: 0.3em;
background: #666;
}
.stop:hover:before {
background: #e91e63;
}
.fast_forward:before {
content: '';
width: 0;
height: 0;
border-top: 0.14em solid transparent;
border-left: 0.24em solid #666;
border-bottom: 0.14em solid transparent;
}
.fast_forward:after {
content: '';
width: 0;
height: 0;
border-top: 0.14em solid transparent;
border-left: 0.24em solid #666;
border-bottom: 0.14em solid transparent;
}
.fast_forward:hover:before,
.fast_forward:hover:after {
border-left-color: #e91e63;
}
.fast_forward_back:before {
content: '';
width: 0;
height: 0;
border-top: 0.14em solid transparent;
border-right: 0.24em solid #666;
border-bottom: 0.14em solid transparent;
}
.fast_forward_back:after {
content: '';
width: 0;
height: 0;
border-top: 0.14em solid transparent;
border-right: 0.24em solid #666;
border-bottom: 0.14em solid transparent;
}
.fast_forward_back:hover:before,
.fast_forward_back:hover:after {
border-right-color: #e91e63;
}
.skip_next:before {
content: '';
width: 0;
height: 0;
border-top: 0.14em solid transparent;
border-left: 0.24em solid #666;
border-bottom: 0.14em solid transparent;
}
.skip_next:after {
content: '';
width: 0.05em;
height: 0.25em;
background: #666;
margin-left: 0.025em;
}
.skip_next:hover:before {
border-left-color: #e91e63;
}
.skip_next:hover:after {
background: #e91e63;
}
.skip_prev:before {
content: '';
width: 0.05em;
height: 0.25em;
background: #666;
margin-right: 0.025em;
}
.skip_prev:after {
content: '';
width: 0;
height: 0;
border-top: 0.14em solid transparent;
border-right: 0.24em solid #666;
border-bottom: 0.14em solid transparent;
}
.skip_prev:hover:before {
background: #e91e63;
}
.skip_prev:hover:after {
border-right-color: #e91e63;
}
.arrow_left:before {
content: '';
width: 0;
height: 0;
border-top: 0.14em solid transparent;
border-right: 0.24em solid #666;
border-bottom: 0.14em solid transparent;
}
.arrow_left:hover:before {
border-right-color: #e91e63;
}
.arrow_right:before {
content: '';
width: 0;
height: 0;
border-top: 0.14em solid transparent;
border-left: 0.24em solid #666;
border-bottom: 0.14em solid transparent;
}
.arrow_right:hover:before {
border-left-color: #e91e63;
}
.arrow_up:before {
content: '';
width: 0;
height: 0;
border-right: 0.14em solid transparent;
border-bottom: 0.24em solid #666;
border-left: 0.14em solid transparent;
}
.arrow_up:hover:before {
border-bottom-color: #e91e63;
}
.arrow_down:before {
content: '';
width: 0;
height: 0;
border-right: 0.14em solid transparent;
border-top: 0.24em solid #666;
border-left: 0.14em solid transparent;
}
.arrow_down:hover:before {
border-top-color: #e91e63;
}
.plus:before {
content: '';
height: 0.3em;
width: 0.065em;
background: #666;
position: absolute;
}
.plus:after {
content: '';
height: 0.3em;
width: 0.065em;
background: #666;
position: absolute;
transform: rotate(90deg);
}
.plus:hover:before,
.plus:hover:after {
background: #e91e63;
}
.minus:before {
content: '';
height: 0.065em;
width: 0.3em;
background: #666;
position: absolute;
}
.minus:hover:before {
background: #e91e63;
}
.bookmark_outline:before {
content: '';
height: 0.4em;
width: 0.3em;
border: 0.03em solid #666;
border-bottom: 0;
position: absolute;
top: 0.25em;
border-radius: 12%;
}
.bookmark_outline:after {
content: '';
height: 0.22em;
width: 0.22em;
border: 0.03em solid #666;
border-bottom: 0;
border-right: 0;
transform: rotate(45deg);
position: absolute;
top: 0.53em;
}
.bookmark_outline:hover:before,
.bookmark_outline:hover:after {
border-color: #e91e63;
}
.bookmark:before {
content: '';
height: 0.4em;
width: 0.3em;
border: 0.03em solid #666;
background: #666;
border-bottom: 0;
position: absolute;
top: 0.25em;
border-radius: 12%;
}
.bookmark:after {
content: '';
height: 0.22em;
width: 0.22em;
border: 0.03em solid #666;
background: #fff;
border-bottom: 0;
border-right: 0;
transform: rotate(45deg);
position: absolute;
top: 0.53em;
}
.bookmark:hover:before {
border-color: #e91e63;
background: #e91e63;
}
.bookmark:hover:after {
border-color: #e91e63;
}
.cloud_outline:before {
content: '';
height: 0.25em;
width: 0.6em;
border: 0.05em solid #666;
border-top: 0;
border-radius: 39%;
position: absolute;
top: 0.4em;
}
.cloud_outline:after {
content: '';
height: 0.2em;
width: 0.2em;
border: 0.05em solid #666;
background: #fff;
border-bottom: 0;
border-right: 0;
position: absolute;
border-radius: 50%;
left: 0.24em;
top: 0.27em;
transform: rotate(20deg);
}
.cloud_outline .part:before {
content: '';
height: 0.32em;
width: 0.32em;
border: 0.05em solid #666;
background: #fff;
border-bottom: 0;
border-left: 0;
position: absolute;
border-radius: 50%;
left: 0.41em;
top: 0.18em;
transform: rotate(-25deg);
}
.cloud_outline:hover:before,
.cloud_outline:hover:after,
.cloud_outline:hover .part:before {
border-color: #e91e63;
}
.cloud:before {
content: '';
height: 0.25em;
width: 0.6em;
border: 0.05em solid #666;
background: #666;
border-top: 0;
border-radius: 39%;
position: absolute;
top: 0.4em;
}
.cloud:after {
content: '';
height: 0.2em;
width: 0.2em;
border: 0.05em solid #666;
background: #666;
border-bottom: 0;
border-right: 0;
position: absolute;
border-radius: 50%;
left: 0.24em;
top: 0.27em;
transform: rotate(20deg);
}
.cloud .part:before {
content: '';
height: 0.32em;
width: 0.32em;
border: 0.05em solid #666;
background: #666;
border-bottom: 0;
border-left: 0;
position: absolute;
border-radius: 50%;
left: 0.41em;
top: 0.18em;
transform: rotate(-25deg);
}
.cloud:hover:before,
.cloud:hover:after,
.cloud:hover .part:before {
border-color: #e91e63;
background: #e91e63;
}
.heart_outline:before {
content: '';
height: 0.25em;
width: 0.25em;
border: 0.04em solid #666;
border-radius: 50%;
border-bottom: 0;
border-right: 0;
position: absolute;
top: 0.25em;
left: 0.2em;
}
.heart_outline:after {
content: '';
height: 0.25em;
width: 0.25em;
border: 0.04em solid #666;
border-radius: 50%;
border-bottom: 0;
border-left: 0;
position: absolute;
top: 0.25em;
left: 0.46em;
}
.heart_outline .part {
height: 0.31em;
width: 0.3em;
border: 0.04em solid #666;
border-left: 0;
border-top: 0;
transform: rotate(45deg);
position: absolute;
left: 0.31em;
top: 0.32em;
}
.heart_outline:hover:before {
border-color: #e91e63;
}
.heart_outline:hover:after {
border-color: #e91e63;
}
.heart_outline:hover .part {
border-color: #e91e63;
}
.heart:before {
content: '';
height: 0.25em;
width: 0.25em;
border: 0.04em solid #666;
background: #666;
border-radius: 50%;
border-bottom: 0;
border-right: 0;
position: absolute;
top: 0.25em;
left: 0.2em;
}
.heart:after {
content: '';
height: 0.25em;
width: 0.25em;
border: 0.04em solid #666;
background: #666;
border-radius: 50%;
border-bottom: 0;
border-left: 0;
position: absolute;
top: 0.25em;
left: 0.46em;
}
.heart .part {
height: 0.3em;
width: 0.33em;
border: 0;
border-left: 0;
border-top: 0;
transform: rotate(45deg);
position: absolute;
left: 0.3em;
top: 0.36em;
background: #666;
}
.heart:hover:before {
border-color: #e91e63;
background: #e91e63;
}
.heart:hover:after {
border-color: #e91e63;
background: #e91e63;
}
.heart:hover .part {
background: #e91e63;
}
.shopping_cart:before {
content: '';
border-top: 0.25em solid #666;
border-left: 0.1em solid transparent;
border-right: 0.1em solid transparent;
height: 0;
width: 0.3em;
border-top-right-radius: 0.06em;
border-bottom-right-radius: 0.05em;
}
.shopping_cart:after {
content: '';
position: absolute;
height: 0.3em;
width: 0.06em;
border: 0.05em solid #666;
border-top: 0;
border-right: 0;
transform: rotate(156deg);
left: 0.2em;
top: 0.3em;
}
.shopping_cart i.part {
height: 0.05em;
width: 0.3em;
border: 0.04em solid #666;
border-right: 0;
border-top: 0;
position: absolute;
left: 0.34em;
top: 0.61em;
}
.shopping_cart i.part:before {
content: '';
height: 0.1em;
width: 0.1em;
background: #666;
border-radius: 50%;
position: absolute;
top: 0.12em;
}
.shopping_cart i.part:after {
content: '';
height: 0.1em;
width: 0.1em;
background: #666;
border-radius: 50%;
position: absolute;
top: 0.12em;
left: 0.2em;
}
.shopping_cart:hover:before {
border-top-color: #e91e63;
}
.shopping_cart:hover:after {
border-color: #e91e63;
}
.shopping_cart:hover .part {
border-color: #e91e63;
}
.shopping_cart:hover .part:before {
background: #e91e63;
}
.shopping_cart:hover .part:after {
background: #e91e63;
}
<div class="container"> <div class="base search"></div> <div class="base cross"></div> <div class="base tick"></div> <div class="base menu"></div> <div class="base phone"></div> <div class="base lock"><i class="part"></i></div> <div class="base lock lock-open"><i class="part"></i></div> <div class="base home"></div> <div class="base logout"></div> <div class="base edit"></div> <div class="base mail_outline"></div> <div class="base mail"></div> <div class="base bell_outline"><i class="part"></i></div> <div class="base bell"><i class="part"></i></div> <div class="base trash_outline"></div> <div class="base trash"></div> <div class="base eye"></div> <div class="base eye_slash"><i class="part"></i></div> <div class="base error_outline"></div> <div class="base error"></div> <div class="base settings"><i class="part"></i></div> <div class="base avatar_outline"></div> <div class="base avatar"></div> <div class="base chat_outline"><i class="part"></i></div> <div class="base chat"><i class="part"></i></div> <div class="base filter"></div> <div class="base map_marker"></div> <div class="base play"></div> <div class="base pause"></div> <div class="base stop"></div> <div class="base fast_forward"></div> <div class="base fast_forward_back"></div> <div class="base skip_next"></div> <div class="base skip_prev"></div> <div class="base arrow_left"></div> <div class="base arrow_right"></div> <div class="base arrow_up"></div> <div class="base arrow_down"></div> <div class="base plus"></div> <div class="base minus"></div> <div class="base bookmark_outline"></div> <div class="base bookmark"></div> <div class="base cloud_outline"><i class="part"></i></div> <div class="base cloud"><i class="part"></i></div> <div class="base heart_outline"><i class="part"></i></div> <div class="base heart"><i class="part"></i></div> <div class="base shopping_cart"><i class="part"></i></div> <!-- TBD --> <!-- <div class="base timer"></div> <div class="base timer_off"></div>--> </div>
