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

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

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

Решил поделиться своей старой заготовочкой на CSS для добавления иконки к внешним ссылкам на сайте.  В первую очередь это будет удобно вашим пользователям – они визуально смогут понять, что вы их хотите направить на сторонний ресурс. Лично я это считаю хорошим тоном, поэтому и стараюсь добавлять такую иконку во все проекты.

Все очень просто и многие этим давно пользуются, но если кому-то пригодится – значит не зря я это написал. Приступим….

Открываем CSS файл и просто добавляем в него этот кусок кода:

/* Иконка для внешних ссылок */
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, 33 hits)

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

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

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

Мы в социальных сетях

вконтакте twitter google plus facebook
  • keyboard_arrow_downДобавляем иконку к внешним ссылкам на сайте
    • Автор:
    • Язык: ru-RU
    • Миниатюра: https://geekelectronics.org/wp-content/uploads/2017/08/image_thumb-1.png
    • Рубрика: HTML и CSS
    • Метки: , , ,
    • Обновлено: 15.11.2017
    • Комментариев: 3
    • Просмотров: 82
  • Оцените пожалуйста статью
    1 Star2 Stars3 Stars4 Stars5 Stars 9 votes, average: 5,00 out of 5
    Загрузка...
  • Поделитесь с друзьями
logo

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

  • IGor:

    Добавил себе иконку. Спасибо.

  • alex:

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

  • source™:

    Если использовать в wordpress, то для универсальности лучше в файл header.php вашей темы добавить следующий код:

    <style type="text/css">
    .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