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

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

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

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

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

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

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

Свои вопросы оставляйте в комментариях или задавайте их в нашей группе в Телеграм

Geek Electronics
  • keyboard_arrow_downДобавляем иконку к внешним ссылкам на сайте
    • Автор:
    • Миниатюра: Добавляем иконку к внешним ссылкам на сайте
    • Рубрика: Веб-разработка
    • Обновлено: 26.12.2017
    • Комментариев: 3
    • Просмотров: 197
      • searchПоисковые боты
        Дата Бот
        2018-06-25 08:31:50 Bing
        2018-06-24 09:31:08 Bing
        2018-06-23 08:38:09 Bing
        2018-06-21 10:01:18 Bing
        2018-06-21 06:59:43 Yandex
        2018-06-20 23:25:13 Google
        2018-06-20 09:03:21 Bing
        2018-06-19 02:32:13 Bing
        2018-06-17 09:15:24 Bing
        2018-06-17 02:26:28 Yandex
  • Оцените пожалуйста статью
    1 Star2 Stars3 Stars4 Stars5 Stars
    Loading Загрузка...
  • Поделитесь с друзьями
GeekElectronics

Похожие записи

Комментариев: 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*="< ?php echo $_SERVER['SERVER_NAME']; ?>"]):after,
    .post .content a[href^="http://"]:not([href*="< ?php echo $_SERVER['SERVER_NAME']; ?>"]):after,
    .post .content a[href^="https://"]:not([href*="< ?php echo $_SERVER['SERVER_NAME']; ?>"]):after,
    .post .content a[href^="ftp://"]:not([href*="< ?php echo $_SERVER['SERVER_NAME']; ?>"]):after {
    content: "" url('< ?php bloginfo('template_url'); ?>/images/external.png');
    padding-left:3px;
    }
    </style>

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

arrow_upward