I am struggling with some code that includes bootstrap and an SVG sprite in a header/menu, but there is a thin gray background line appearing in the icons.
Here is the link to the code on CodePen
Can anyone please help me solve this issue? I've tried setting border properties to 0 and adjusting colors/backgrounds, but I seem to be overlooking something.
It seems like it's inheriting a value from normalize.less:
border-image-width: 1;
For reference, here is a snippet of the code:
.icon {
display: inline-block;
background-repeat: no-repeat;
background-image: url(https://cdn.rawgit.com/srisitar/test/master/sprite.svg);
}
.icon-facebook {
width: 96px;
height: 96px;
background-position: 0 0;
}
.icon-twitter {
width: 96px;
height: 96px;
background-position: -128px 0;
}
<
div id="home">
<a href="">
<img class="icon icon-twitter"></a>
</div>
If anyone knows how to remove the gray line, I would greatly appreciate your assistance. Thank you!