icon, .icon {
width: 1em;
/* border: 1px solid red; */
display: inline-block;
position: relative;
/* margin: 0 auto; */
}
.icon-inline {
display: inline-block;
}
.icon-2x {
width: 2em;
}
.icon-3x {
width: 3em;
}
.icon-4x {
width: 4em;
}
.icon-5x {
width: 5em;
}
icon:after,.icon:after {
width: 100%;
padding-top: 100%;
content: "";
position: relative;
display: block;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.icon-white:after {
filter: invert(1);
}
.icon-yellow:after {
filter: invert(86%) sepia(65%) saturate(3915%) hue-rotate(9deg) brightness(105%) contrast(102%);
}
.icon-red:after {
filter: invert(7%) sepia(92%) saturate(6778%) hue-rotate(354deg) brightness(124%) contrast(111%);
}
/* https://codepen.io/sosuke/pen/Pjoqqp */
.icon-example:after {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-facebook:after {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-facebook-circle:after {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-invert-facebook:after {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-invert-instagram:after {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-invert-linkedin:after {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-invert-phone:after {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-invert-envelope:after {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-invert-arrow-right:after {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-instagram:after {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-mail:after {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-mapplace:after {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-feed:after {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-trust:after {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-kalender:after {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-telefon:after {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-user:after {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-mapplace2:after {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-flaeche:after {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-users:after {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-zahnrad:after {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-film:after {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-suche:after {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-wa:after {
background-image: url('../img/wa.svg');
}
.icon-longarrow {
width: 4em;
height: 1em;
position: relative;
}
.icon-longlongarrow {
width: 8em;
height: 1em;
position: relative;
}
.icon-longlongarrow:after, .icon-longarrow:after {
content: "";
height: 0.5em;
width: 0.5em;
position: absolute;
top: 0px;
border-right: 1px solid black;
border-bottom: 1px solid black;
right: 0px;
transform: translateY(0.5px) translateX(0px) rotateZ(-45deg);
transform-origin: bottom right;
padding: 0;
}
.icon-longlongarrow:before, .icon-longarrow:before {
content: "";
height: 1px;
width: calc(100% - 2px);
left: 0px;
position: absolute;
top: 50%;
background-color: black;
}