А что если сделать так:
Создаем тег-ссылку a - делаем ей display: block;, задаем требуемую ширину и высоту и делаем ей фиолетовый background-color; Далее в эту ссылку помещаем img и задаем ему src=ваша рамка, полностью вся. Делаем img { display: none; } а при наведении на ссылку img { display: block; }, то есть так(размеры беру случайные)

a {
    display: block; (или inline-block, попробуйте и так и так)
    width: 120px;
    height: 40px;
    padding: 10px 20px;
    background-color: фиолетовый цвет;
}

a img {
    display: none;
    width: 100%;
}

a:hover img {
    display: block;
}

Я бы советовал продолжать осваивать front-end а именно HTML5/CSS3 (с его Bootrstrap, Flex), уметь работать с CSS3 анимациями, препроцессоры вроде SASS/Stylys, jQuery, получше выучить нативный JS (не просто работу с DOM, а вообще понять его смысл как функционального языка, на это уйдет немало времени). Ну а далее все популярные инструменты вроде Gulp/Bower и так далее.
Если интересна тема back-end и вообще хочется понять как "там" все работает то учи PHP. Что бы про него не говорили но он дает быстрое понимание серверной стороны сайта.
Отличная книга "PHP и MySQL. От новичка к профессионалу." Кевин Янк

Иконочный шрифт нужен для мелких деталей которые не желательно размещать изображением, например: стрелочка рядом со списком, плюсик рядом с кнопкой, иконочка письма рядом с почтой и так далее.
Спрайт - это множество мелких иконок которые в процессе верстки лепятся в однин файл изображения (зачастую этот холст прозрачный). Плюс этого метода в том что не нужно много раз посылать запрос на загрузку мелкой картинки (например иконок соц сетей). Все это упаковано в один файл и запрашивается один раз. На самой странице положение спрайтов выполняется при помощи background-position: ...px ...px;