Как применить css hover к иконкам?
Примерно так:<a href="#" class="isnta"></a>.isnta { display: inline-block; width: 16px; height: 16px; background: url('/images/isnta.png') 0 0 no-repeat; }
.isnta:hover { background: url('/images/isnta_hover.png') 0 0 no-repeat; }
А вот так еще красивее:<a href="#" class="ico ico_isnta">Instagram</a>
<a href="#" class="ico ico_youtubecom">Youtube</a>.ico { display: inline-block; width: 16px; height: 16px; overflow: hidden; text-indent: -300em; }
.ico_isnta { background: url('/images/isnta.png') 0 0 no-repeat; }
.ico_isnta:hover { background: url('/images/isnta_hover.png') 0 0 no-repeat; }
.ico_youtubecom { background: url('/images/youtubecom.png') 0 0 no-repeat; }
.ico_youtubecom:hover { background: url('/images/youtubecom_hover.png') 0 0 no-repeat; }
Ну и напоследок советую нарезать все иконки в спрайт и при ховере менять их позицию, чтобы избежать моргания.
у вас неверный код, вот как нужно:img.insta:hover{
background: url(images/insta_b.png);
}
Т.е. выбирается img с классом insta, в вашем же варианте вы выбираете все img, находящиеся в  элементе с классом inst.