Замечаю довольно часто, что не все верстальщики любят делать иконку частью ссылки и выравнивать ее относительно текста, однако пользователю приятно наводить курсор на иконку и видеть активность ссылки.

У меня в одном проекте было очень много иконок разных размеров, как самих иконок, так и шрифта, в результате чего я решил изобрести велосипед и сделать универсальное решение которым делюсь.

.b-icons {
    position: relative;
    
    padding-left: 0 0 0 1em; /* отступ на свое усмотрение */
    
    display: inline-block; /* костыль для Opera, в противном случае при ресайзе окна браузера в инлайновых элементах иконки поплывут */
    
    zoom: 1; /* неизбежность для ie6, по учению фреймворка вообще можно вынести в отдельный CSS */
}
.b-icons i {
    position: absolute;
    top: 50%;
    left: 0;
    
    display: block;
    overflow: hidden;
}

HTML:

<a href="#" class="b-icons b-icons_main"><i></i>главная</a>

далее индивидуальный код для иконок, хотя если у вас используются все иконки с одинаковыми свойствами ширины, высоты и фона, их можно перенести в код выше или создать отдельный класс например b-icons_16x16, кроме background-position

.b-icons_main i {
    width: 16px;
    height: 16px;
    margin-top: -8px; /* половина высоты иконки */
    
    background: url(/images/sprite.gif) 0 -20px;
}

p.s. сейчас посмотрел как реализованы иконки на главной странице Яндекса, очень похожее решение, но я предлагаю немного другой способ, как универсально выровнять иконку относительно текста, а не конкретное решение реализации иконок. В Яндексе используются спрайты с png-24, ниже немного усложненный вариант для того чтобы можно было в ie6 применить альфа фильтр.

.b-icons i s {
    display: block;
}

.b-icons_main i {
    width: 16px;
    height: 16px;
    margin-top: -8px;

    display: block;
    overflow: hidden;
}
.b-icons_main i s {

    width: 250px; /* обязательно указать полный размер картинки */
    height: 250px; /* обязательно указать полный размер картинки */
    margin: -12px 0 0 -24px; /* уже позиционирование в спрайте не через background-position, а марджином */
   
    background: url(/images/sprite.png); /* в отдельном CSS для ie6 можно прописать альфа фильтр */
}

HTML:

<a href="#" class="b-icons b-icons_main"><i><s></s></i>главная</a>

единственный косяк с которым я так и не справился — это если изменить font-size в самой ссылке, выравнивание работать не будет, нужно менять размер шрифта в дереве выше.

предлагаю это решение включить в фреймворк