css CSS SVG Sprite

Posted 2021-05-13

// Usage:
//	<div class="sprite-icons">
//		<div class="sprite-icon sprite-icon-[0-9]"></div>
//	</div>

.sprite-icons {
	display: inline-block;
	overflow: hidden;
}

.sprite-icon {
	background: url('sprite-icons.png');
}

.svg .sprite-icon {
	background-image:url('sprite-icons.svg');
}

.sprite-icon {
  background-repeat:no-repeat;
	display: block;
	float: left;
	height: 55px;
	width: 55px;
	text-decoration: none;
}

.sprite-icon-1,.sprite-icon-1\:regular{background-position:0 0;}
.sprite-icon-2,.sprite-icon-2\:regular{background-position:0 -55px;}
.sprite-icon-3,.sprite-icon-3\:regular{background-position:0 -110px;}