أهلًا بك،
يمكن فعل ذلك بعدة طرق أبسطها أن تعطي أمر javascript في نفس السطر لوسم <img> باستخدام الخاصيتين onmouseover و onmouseout وبعد ضبط رابط صورتك الصحيح فينتج كالتالي
<a href="#" id="name">
<img title="Hello" src="/ico/view.png" onmouseover="this.src='/ico/view.hover.png'" onmouseout="this.src='/ico/view.png'" />
</a>
إذا كنت تريد تغيير شكل أيقونه بوتستراب فيمكن فعل ذلك بخاصية css وهي hover كالتالي
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="container">
<a href="#" class="lock">
<i class="fa fa-unlock"></i>
<i class="fa fa-lock"></i>
</a>
</div>
<style>
.lock:hover .fa-unlock,
.lock .fa-lock {
display: none;
}
.lock:hover .fa-lock {
display: inline;
}
</style>
</body>
</html>
بالتوفيق..