i[class*="icss-"] { position: relative; display:inline-block; font-style: normal; background-color:currentColor; box-sizing: border-box; vertical-align: middle; } i[class*="icss-"]:before, i[class*="icss-"]:after { content: ""; border-width: 0; position: absolute; box-sizing: border-box; } /* Size */ [class*="icss-"].xxsmall { font-size: .45em; } [class*="icss-"].xsmall { font-size: .5em; } [class*="icss-"].small { font-size: .65em; } [class*="icss-"].x1_5 { font-size: 1.5em; } [class*="icss-"].x2 { font-size: 2em; } [class*="icss-"].x2_5 { font-size: 2.5em; } [class*="icss-"].x3 { font-size: 3em; } [class*="icss-"].x4 { font-size: 4em; } [class*="icss-"].x5 { font-size: 5em; } /* Align text-bottom */ i[class*="icss-"].bottom { vertical-align:text-bottom; } /* flip */ .flip { transform: scaleX(-1); } /* rotate */ i[class*="icss-"].rot10 { transform: rotate(10deg); } i[class*="icss-"].rot-10 { transform: rotate(-10deg); } i[class*="icss-"].rot20 { transform: rotate(20deg); } i[class*="icss-"].rot-20 { transform: rotate(-20deg); } i[class*="icss-"].rot45 { transform: rotate(45deg); } i[class*="icss-"].rot-45 { transform: rotate(-45deg); } i[class*="icss-"].rot90 { transform: rotate(90deg); } i[class*="icss-"].rot-90 { transform: rotate(-90deg); } i[class*="icss-"].rot180 { transform: rotate(180deg); } i[class*="icss-"].rot-180 { transform: rotate(-180deg); } /* force animation */ i.icss-anim, i.icss-anim:before, i.icss-anim:after { transition: all 1s; } /* Spin */ .icss-spin { animation: spin 2s infinite linear; } .icss-pulse { animation: spin 1s infinite steps(8); } .icss-spin-hover:hover { animation: spin 2s infinite linear; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } /* BELL */ @keyframes ring { 0%{transform:rotate(-15deg)} 2%{transform:rotate(15deg)} 4%{transform:rotate(-18deg)} 6%{transform:rotate(18deg)} 8%{transform:rotate(-22deg)} 10%{transform:rotate(22deg)} 12%{transform:rotate(-18deg)} 14%{transform:rotate(18deg)} 16%{transform:rotate(-12deg)} 18%{transform:rotate(12deg)} 20%,100%{transform:rotate(0deg)} } .icss-ring { animation: ring 2s infinite ease; } .icss-ring-hover:hover { animation: ring 2s infinite ease; } /* VERTICAL */ @keyframes vertical { 0%{transform:translate(0,-3px)} 4%{transform:translate(0,3px)} 8%{transform:translate(0,-3px)} 12%{transform:translate(0,3px)} 16%{transform:translate(0,-3px)} 20%{transform:translate(0,3px)} 22%,100%{transform:translate(0,0)} } .icss-vibes, .icss-vibes-hover:hover { animation: vertical 2s ease infinite; } /* HORIZONTAL */ @keyframes horizontal { 0%{transform:translate(0,0)} 6%{transform:translate(5px,0)} 12%{transform:translate(0,0)} 18%{transform:translate(5px,0)} 24%{transform:translate(0,0)} 30%{transform:translate(5px,0)} 36%,100%{transform:translate(0,0)} } .icss-shake, .icss-shake-hover:hover { animation: horizontal 2s ease infinite; } /* TADA */ @keyframes tada { 0% {transform: scale(1)} 10%,20% {transform:scale(.9) rotate(-8deg);} 30%,50%,70% {transform:scale(1.3) rotate(8deg)} 40%,60% {transform:scale(1.3) rotate(-8deg)} 80%,100% {transform:scale(1) rotate(0)} } .icss-tada, .icss-tada-hover:hover{ animation: tada 2s linear infinite; } /* Reverse animation */ .icss-reverse { animation-direction: reverse; } [class*="-hover"].icss-reverse:hover { animation-direction: reverse; } /* Stack icons */ .icss-stack { position: relative; width: 1em; height: 1em; display: inline-block; } .icss-stack i[class*="icss-"] { position: absolute; top: 50%; left: 50%; transform: translate(-.5em, -.5em); } .icss-stack i[class*="icss-"].bottom { bottom: 0; top: auto; } /* shadow icon */ .icss-shadow { position: relative; width: 1em; height: 1em; display: inline-block; } .icss-shadow i[class*="icss-"] { position: absolute; top: 50%; left: 50%; transform: translate(-.5em, -.5em); } .icss-shadow i[class*="icss-"]:first-child { top: 54%; left: 54%; }