Использование иконок в спрайтах и "em"

[danik.html]

Не могу решить проблему.

У меня для инлайновых элементов, например для внешних ссылок указана иконка, через background.

Так вот, когда размер шритфа фиксированный, например строго 14px/16px, то проблемы нет, задаю:

background: url(images/sprite.png) no-repeat 0 -64px;

И все здорово, иконка по центру строчки, все красиво.

Однако когда шрифт нужно задать в em, например 1em/1.2em , то тут возникает проблема. Так как физический размер в пикселях может изменяться, то и иконка "гуляет", уползая вверх-вниз.

Есть ли решение этой проблемы?

Вариант с иконкой через :before не предлагать, он не работает в ие7, а городить костыли крайне нежелательно..

[Switch74]

мне кажется ты будешь от одного костыля к другому бегать с этими em.

попробуй вместо background: url(images/sprite.png) использовать <img src="images/sprite.png"> с процентами

[DImas95]

Попробуйте

vertical-align: middle;

может сработать

[Switch74]

Попробуйте

vertical-align: middle;

может сработать

В этом варианте картинка не будет менять своих размеров, а я так понимаю человеку нужно чтобы картинка пропорционально тексту рядом увеличивалась или я ошибаюсь?

[DImas95]

В этом варианте картинка не будет менять своих размеров, а я так понимаю человеку нужно чтобы картинка пропорционально тексту рядом увеличивалась или я ошибаюсь?

Насколько я понял, то картинка фиксированного размера, но всегда должна быть по центру от ссылки.

А если нужно что бы и картинка растягивалась, то тогда может быть ей размер в процентах задать, но тогда она будет искажаться заметно, если ссылка будет довольно большая.

[Switch74]

Насколько я понял, то картинка фиксированного размера, но всегда должна быть по центру от ссылки.

А если нужно что бы и картинка растягивалась, то тогда может быть ей размер в процентах задать, но тогда она будет искажаться заметно, если ссылка будет довольно большая.

а если ссылка будет довольно большая а картинка останется маленькой - это тоже не очень хорошо по моему.

выбор за ТС.

[danik.html]

Вы немножко не поняли проблемы.

У меня есть допустим ссылка:

<a href="#">Йа ссылко! КликМи!</a>

И у меня есть иконка для этой ссылки. Все отлично когда иконка в отдельном файле, нет проблем, пишу:

a{

background: url(images/icon.png) no-repeat 0 50%;

padding-left: 10px;

}

Моя иконка всегда будет по центру ссылки, все ок.

Но проблема возникает когда я пакую иконку в спрайт. Я теряю возможность центрировать ее, ведь в процентах я уже не могу указать значение по вертикали.

Может я не знаю какого-то секрета?

Пока что я подумываю о 3х вариантах решения проблемы:

1) отказаться от спрайтов. Иконок не особо много, фиг с ними

2) использовать :before{content:''; width: 10px; height: 10px; display: inline-block; vertical-align: middle; background: url(sprite.png) 0 -64px;} (или еще есть разновидность с использованием свойства clip) - опять же придется костыли для ие7 лепить.

3) внедрить иконки в css. Становится неудобно редактировать файл, особенно менять иконки, это ладно. Вес увеличивается - становится больше чем исходный вес картинок. Я знаю что gzip нивелирует этот прирост, но я верстаю коммерческий шаблон, и поэтому не уверен включен ли будет gzip у покупателя. И опять же костили для ие7...

[danik.html]

Нет идей?

[DStereo]

Нет идей?

Делай так:

<a href="#"><img width="10" height="10" src="transparent.gif" alt="_"> Какой-то текст</a>

a img{background:(sprite.png) no-repeat 0 0;vertical-align:middle}

Делаем однопиксельную прозрачную гифку и выставляем размеры которые нужны для иконки. Ширина и высота иконки будут фиксированные даже если текст будет в em и может масштабироваться. Ну и соответственно выставляем background-position в нужное положение, чтобы показалась именно необходимая иконка.

[Searcher]

Можно спрайт сделать с большими расстояниями между иконками, и индивидуально под каждый em рассчитывать смещения. Но это не так универсально, как с использованием дополнительного элемента.