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

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

ссылки Иконка внешняя CSS  primery na html i css

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

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

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

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

  • vertical_align_bottomДобавляем иконку к внешним ссылкам на сайте
    • Автор:
    • Язык: ru-RU
    • Миниатюра: https://geekelectronics.org/wp-content/uploads/2017/08/image_thumb-1.png
    • Рубрика: HTML и CSS
    • Метки: , , ,
    • Обновлено: 24.08.2017
    • Комментариев: 1
    • Просмотров: 55
  • Рейтинг:
    1 Star2 Stars3 Stars4 Stars5 Stars (7 votes, average: 5,00 out of 5)
    Загрузка...
  • Поделиться:
logo

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

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

vertical_align_top
banner