Блог о программировании, электронике и рыбалке

Добавляем иконку к внешним ссылкам на сайте

иконка к внешним ссылкам

Пошаговая инструкция по добавлению иконки к внешним ссылкам на сайте.

Решил поделиться своей старой заготовочкой на 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 байт, 954 hits)

Эта ссылка ведет на Google и справа от нее должна быть иконка

На этом все. Маловато написал, но тут действительно все очень просто.

Присоединяйтесь к нашей группе в Telegram @GeekElectronics
  • keyboard_arrow_downДобавляем иконку к внешним ссылкам на сайте
    • Автор:
    • Миниатюра: Добавляем иконку к внешним ссылкам на сайте
    • Рубрика: Веб-разработка
    • Обновлено: 26.12.2017
    • Комментариев: 3
    • Просмотров: 921
  • Оцените пожалуйста статью
    1 Star2 Stars3 Stars4 Stars5 Stars
    Загрузка...
  • Поделитесь с друзьями
Geek Electronics

Комментариев: 3

  • Avatar for source
    alex:

    перед content: "" url('images/external.png');
    надо: content: "" url('/images/external.png');

  • Avatar for source
    source™:

    Если использовать в 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>

Добавить комментарий

arrow_upward