1508AAA - Win 8.1 IE11 SVG test
Win 8.1 IE11 SVG test
HTML
<span class="icon--arrow-up"></span>
<span class="icon--arrow-down"></span>
<span class="icon--arrow-left"></span>
<span class="icon--arrow-right"></span>
<span class="icon--facebook"></span>
<span class="icon--twitter"></span>
<span class="icon--linkedin"></span>
<span class="icon--book"></span>
<span class="icon--calendar"></span>
<span class="icon--exhibition"></span>
<span class="icon--showcase"></span>
<span class="icon--talk"></span>
<span class="icon--v-dots"></span>
SCSS
//General for all icon fonts
%icon {
display: block;
width: 50px;
height: 50px;
margin: 15px;
speak: none;
text-transform: none;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
background-color: #000;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// PROJECT
.icon,
[class^="icon--"],
[class*=" icon--"] {
@extend %icon;
transform: translate(10px 0);
}
.icon--arrow-up {
background-image: url(http://prototyper.1508test.dk/AAA/production/images/ui/icons/arrow-up.svg);
}
.icon--arrow-down {
background-image: url(http://prototyper.1508test.dk/AAA/production/images/ui/icons/arrow-down.svg);
}
.icon--arrow-left {
background-image: url(http://prototyper.1508test.dk/AAA/production/images/ui/icons/arrow-left.svg);
}
.icon--arrow-right {
background-image: url(http://prototyper.1508test.dk/AAA/production/images/ui/icons/arrow-right.svg);
}
.icon--facebook {
background-image: url(http://prototyper.1508test.dk/AAA/production/images/ui/icons/facebook.svg);
}
.icon--twitter {
background-image: url(http://prototyper.1508test.dk/AAA/production/images/ui/icons/twitter.svg);
}
.icon--linkedin {
background-image: url(http://prototyper.1508test.dk/AAA/production/images/ui/icons/linkedin.svg);
}
.icon--book {
background-image: url(http://prototyper.1508test.dk/AAA/production/images/ui/icons/book.svg);
}
.icon--calendar {
background-image: url(http://prototyper.1508test.dk/AAA/production/images/ui/icons/calendar.svg);
}
.icon--exhibition {
background-image: url(http://prototyper.1508test.dk/AAA/production/images/ui/icons/exhibition.svg);
}
.icon--showcase {
background-image: url(http://prototyper.1508test.dk/AAA/production/images/ui/icons/showcase.svg);
}
.icon--news {
background-image: url(http://prototyper.1508test.dk/AAA/production/images/ui/icons/news.svg);
}
.icon--talk {
background-image:...