remove the thin line in header images in bootstrap

Question

I have basic code with bootstrap and a svg sprit in a header / menu.. and there is a thin gray background line in the icons.

http://codepen.io/anon/pen/dpzKoQ?editors=1100

can you please help. I have tried setting

border-* etc to 0 - and I can fix. I set the colors / background - but some place I am missing something.

some place it is getting the below value from normalize.less

border-image-width: 1 ;

code: please see codepen.

    .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>

how do remove the gray line.

thanks

Answer 1

It's because you are using an img tag with no src attribute. Chrome is essentially indicating the size of the container with nothing in it.

If you don't want to place an image between the anchor tags, then don't use an image tag. It's not necessary to place anything between the tags.

Demo here.

Answer 2

You can use div tag with background-image in css instead of using img tag.