How to make the bootstrap3 icon transparent with white edges?

Question

The icon looks like this at the moment ->

And I want him to stay that way ->>>

<nav>
   <a id="contato_link" [routerLink]="['/admin']">
    <span class="glyphicon glyphicon-phone-alt" aria-hidden="true">    </span>
    <br />
    Contato
</a>
<a [routerLink]="['/upload']">Fotos</a>
<a href="#">Endereço</a>
</nav>

Answer 1

The glyphicon is a font, so it gets text properties like color, font-size, etc... So it also accepts the property text-stroke, with it you can put a contorne in the text, in case in the icon that is actually a character of a source calls glyphicon.

So how the text-stroke you put the outline, and as the color: transparent; vc puts the color of the font transparent, leaving only the outline of the icon image.

body {
    background-image: linear-gradient(to bottom, #00f 0%, #f00 100%);
}

#contato_link .glyphicon {
    -webkit-text-fill-color: transparent;
    color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #fff;
    font-size: 50px;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<nav>
    <a id="contato_link" [routerLink]="['/admin']">
        <span class="glyphicon glyphicon-phone-alt" aria-hidden="true"> </span>
        <br />
        Contato
    </a>
    <a [routerLink]="['/upload']">Fotos</a>
    <a href="#">Endereço</a>
</nav>

OBS: Browser support you can check here, it doesn’t only work on IE. https://caniuse.com/#feat=text-Stroke and although having to prefix -Webkit- works in several browsers.