Button With SVG Icon Color Change On Hover-CodePudding

Usually changing the color on hover of a Bootstrap button with a font icon is really easy, but however, for some reason, I can't make it work with an SVG icon.

Even if I try to add a style on the SVG icon like the example below, that does not really work since the icon color is not changing when hovering the button.

How can I make the icon and the text change to white on button hover?

.svgoutline {
    fill: #0d6efd;
}
.svgoutline:hover {
    fill: #fff;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<a href="/index" ><span >Read More</span> <svg xmlns="http://www.w3.org/2000/svg" width='8px' height='13px'  style='margin-bottom: 3px;' viewBox="0 0 256 512"><path d="M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z"/><title>Browse</title></svg></a>

CodePudding user response：

You have to add the :hover to the .btn not the svg. Try this

.svgoutline {
    fill: #0d6efd;
}
.btn:hover .svgoutline {
    fill: #fff;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<a href="/index" ><span >Read More</span> <svg xmlns="http://www.w3.org/2000/svg" width='8px' height='13px'  style='margin-bottom: 3px;' viewBox="0 0 256 512"><path d="M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z"/><title>Browse</title></svg></a>