Change foundation svg color on hover - css

Question

Hello so I've seen a lot of codes regarding the hover color change on svg's but I can't get it to work. The thing is I am using foundation icons, and here is a sample code:
<img src="svgs/fi-mail.svg">
Any idea on changing the color on hover?

Answer 1

You have to convert the SVG into a native <svg> tag and then you need to apply DOM traversal and CSS to change it. I have a quick snippet, that I modified from elsewhere, and you can use it to change the properties.
You need to make the SVG to be an inline SVG. You can make use of
this script, by adding a class svg to the image:
/*
* Replace all SVG images with inline SVG
*/
jQuery('img.svg').each(function(){
var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
jQuery.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');
// Add replaced image's ID to the new SVG
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
});
And then, now if you do:
.logo-img path {
fill: #000;
}
Or may be:
.logo-img path {
background-color: #000;
}
This works!
Reference: img src SVG changing the fill color

Answer 2

You cannot change the color of an SVG that is included via an IMG tag. You can only modify inline SVG through CSS.
But the Zurb Foundation Icons are normally included as web-font, where each icon is just a simple text character, which can be styled as any other text. The idea to include a single SVG icon via an IMG tag deviates from the Foundation documentation. Please refer to the „How to use“ section in the docs-article you linked above…