Пошаговая инструкция по добавлению иконки к внешним ссылкам на сайте.
Решил поделиться своей старой заготовочкой на CSS для добавления иконки к внешним ссылкам на сайте. В первую очередь это будет удобно вашим пользователям – они визуально смогут понять, что вы их хотите направить на сторонний ресурс. Лично я это считаю хорошим тоном, поэтому и стараюсь добавлять такую иконку во все проекты.
Все очень просто и многие этим давно пользуются, но если кому-то пригодится – значит не зря я это написал. Приступим….
Открываем CSS файл и просто добавляем в него этот кусок кода:
/* Иконка для внешних ссылок */
a[href^="//"]:not([href*="geekelectronics.org"]):after,
a[href^="http://"]:not([href*="geekelectronics.org"]):after,
a[href^="https://"]:not([href*="geekelectronics.org"]):after,
a[href^="ftp://"]:not([href*="geekelectronics.org"]):after {
content: "" url('images/external.png');
padding-left:3px;
}
Не забудьте поменять в коде geekelectronics.org на свой домен и указать свой путь к самой иконке.
Скачать саму иконку можно по ссылке ниже:
external.png (141 байт, 912 hits)
Эта ссылка ведет на Google и справа от нее должна быть иконка
На этом все. Маловато написал, но тут действительно все очень просто.
Загрузка...
Добавил себе иконку. Спасибо.
перед content: "" url('images/external.png');
надо: content: "" url('/images/external.png');
Если использовать в wordpress, то для универсальности лучше в файл header.php вашей темы добавить следующий код:
<style>
.post .content a[href^="//"]:not([href*=""]):after,
.post .content a[href^="http://"]:not([href*=""]):after,
.post .content a[href^="https://"]:not([href*=""]):after,
.post .content a[href^="ftp://"]:not([href*=""]):after {
content: "" url('/images/external.png');
padding-left:3px;
}
</style>