При наведение (:hover), фон меняется на синий, текст на белый, а вот букву "F" которую я залил картинкой(по дефолту белая, но мне нужна она синяя без наведение мышкой), не меняет цвет, посоветуйте в каком формате делать картинку и как менять ее цвет при наведение на кнопку?
body{
background-color: grey;
}
.fbSocial_footer{
color: #3C5A99;
margin-left: 200px;
float: left;
border: solid #3C5A99 2px;
width: 158px;
height: 43px;
border-radius: 5px;
box-sizing: border-box;
}
.fbFooterTitle{
font-family: Comfortaa, sans-serif;
font-weight: bold;
float: left;
padding-left: 18px;
padding-top: 12px;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 16px;
}
.fbSocial_footer:hover{
background-color: #3C5A99;
color: #D1D8E7;
}
.fbSocial_footer img{
padding-left: 15px;
padding-top: 10px;
height: 22px;
}
<div class="fbSocial_footer max">
<div class="fbFooterTitle">Facebook</div>
<img src="facebook_symbol_deks.png" alt="" class="">
</div>
При наведение (:hover), фон меняется на белый, текст на синий, а вот букву "F" которую я залил картинкой, не меняет цвет, посоветуйте в каком формате делать картинку и как менять ее цвет при наведение на кнопку?