Estou usando svg sprite e gostaria de saber como faço para estilizar esses ícones, eu consigo usar o fill: color
, mas eu gostaria de dar um efeito hover deixando apenas a borda.
Vou colocar os códigos que tenho aqui para fazer o icone aparecer.
SVG:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="facebook" viewBox="0 0 233.1 233.1">
<path class="st0" d="M116.5,0C52.2,0,0,52.2,0,116.5c0,64.4,52.2,116.5,116.5,116.5c64.4,0,116.5-52.2,116.5-116.5C233.1,52.2,180.9,0,116.5,0C116.5,0,116.5,0,116.5,0z M145.7,80.2h-15c-4,0-6.9,3.4-6.9,7.7v6.7h21.4l-3.5,21.7h-18v58.2h-21.9v-58.2H87.3V94.6h14.6V83.5l0,0c0.4-12.6,4.8-24.7,26.2-25.4V58h17.7L145.7,80.2L145.7,80.2z"/>
</symbol>
</defs>
</svg>
CSS:
.social-buttons svg use
{
fill: #fff;
}
HTML:
<a href="#">
<svg class="icon-facebook">
<use xlink:href="svg/myicons.svg#facebook"></use>
</svg>
</a>
Para entender melhor, eu tenho um arquivo myicons.svg
resumi ele a somente um dos icones, ai no html eu chamo o icone pela class
e no css eu dou estilo a esse icone.
Gostaria de saber se consigo deixar esse icone so com borda sem preenchimento quando utilizar o :hover.