Ставим иконки к ссылкам с помощью CSS

03-06-2010, 02:25 AM

Для добавления иконок к ссылкам не потребуется писать хаки. Достаточно просто добавить несколько правил CSS.

Воспользуемся селекторами атрибутов.
Вкратце: селекторы атрибутов позволяют изменять стиль элемента, основываясь на его параметрах. Например, если тег A (ссылка) имеет атрибут target="_blank", применим к нему один стиль, а если такого атрибута нет, применим другой.

Более подробно о селекторах атрибутов можно почитать на htmlbook.ru, можно почитать на habrahabr.ru, можно почитать... Хватит читать, и так понятно, что фича полезная.

Приступим:

Code:

div[id^="post_message"] a[href*="ixbt.com"] {
	background: url("ixbt.png") left center no-repeat;
	padding-left: 20px;
}

div[id^="post_message"] a[href*="3dnews.ru"] {
	background: url("3dnews.png") left center no-repeat;
	padding-left: 20px;
}

div[id^="post_message"] a[href*="overclockers.ru"] {
	background: url("overclockers.png") left center no-repeat;
	padding-left: 20px;
}

Работа приведенного кода продемонстрирована на скрине. Стили будут применяться только к сообщениям.
Селекторы атрибутов работают во всех современных браузерах. А в IE6 ссылки просто останутся нетронутыми и по-прежнему скучными.

Примечание: Предполагается, что иконки сайтов готовы и лежат в том же каталоге, что и файл CSS. Если они лежат в другом месте, потребуется указать относительный путь.

11-03-2013, 06:48 AM

Кому-нибудь пригодится.

Ставим иконки к ссылкам с помощью CSS с установленным хаком "Закрытие/редирект внешних ссылок".
Пример:

Code:

div[id^="post_message"] span[onclick*="ixbt.com"] {
	background: url("ixbt.png") left center no-repeat;
	padding-left: 20px;
}

11-05-2013, 09:10 PM

Quote:

Originally Posted by Shestak

Кому-нибудь пригодится.

Ставим иконки к ссылкам с помощью CSS с установленным хаком "Закрытие/редирект внешних ссылок".
Пример:

Code:

div[id^="post_message"] span[onclick*="ixbt.com"] {
	background: url("ixbt.png") left center no-repeat;
	padding-left: 20px;
}

а как сделать чтобы ко всем внешним ссылкам прикреплялась иконка

11-05-2013, 09:12 PM

Можно только ко всем ссылкам подключить

Code:

div[id^="post_message"] a {
	background: url("ixbt.png") left center no-repeat;
	padding-left: 20px;
}

11-05-2013, 09:23 PM

Quote:

Originally Posted by Sven

Можно только ко всем ссылкам подключить

плохо, что только ко всем

11-05-2013, 09:29 PM

Quote:

Originally Posted by siriusmelaf

плохо, что только ко всем

А как узнать, внешняя она или внутренняя?
Разве что создать другой ВВ-код и там указать для ссылки какой-то ИД или класс

11-05-2013, 09:37 PM

@Sven, ну методом исключения, добавив свой домен кк исключения, ну только это наверно не сработает в классах.
А вообще у меня появилась идея как в редирект от керка добавить иконку, тупо залезть в код и прописать там ее

раз тот редирект определяет внутренние и внешние ссылки,

значит можно присобачить редактируя код

11-05-2013, 10:01 PM

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

11-05-2013, 10:16 PM

kerk, не, через спан не очень корректно все получается, если установлен BB-код CUT то тоже у этих ссылок появляется иконка

11-05-2013, 11:04 PM

Quote:

Originally Posted by siriusmelaf

идея как в редирект от керка добавить иконку

так выше это написано от Shestak
просто убрать

Quote:

Originally Posted by Shestak

[onclick*="ixbt.com"]

И будет ко всем внешним