Прошу совета

Здраствуте, подскажите как это работает или где об этом прочитать) ибо то что в background и что такое i[class^="icon--"] гугл мне не помог i[class^="icon--"] {width:18px; display:inline-block; vertical-align:middle; font-size:0; background-repeat:no-repeat; background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAA7CAYAAAATgCjWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTe //// и ещё очень много непонятного текста\\\ ');}
.icon--home {background-position:0 0; height:17px;}
.icon--gallery {background-position:0 -17px; height:17px;}
.icon--logout {background-position:0 -34px; height:18px;}
.icon--corner {background-position:0 -52px; height:7px; width:7px !important;} и вот такое .list .list-item:hover > .icon--gallery {background-position:-18px -17px;}
при наведении в двух классах меняеться только данныый параметр?
сама работа http://jsfiddle.net/qxEU4/1/