Значок ссылки: Пишем URL, получаем бесплатную иконку / Habr – внешняя ссылка бесплатно значок из News and Media Icons

Leave a Comment / Разное / By /

Пишем URL, получаем бесплатную иконку / Habr

Сервис omg-img позволяет вставлять иконки вот так:
<img src="https://png.icons8.com/search">

Чувствуете, к чему я клоню? Сделали вставление иконок не выходя из IDE. Просто пишете URL, параметры вроде цвета и стиля — мы отрендерим иконку и отдадим через хороший, годный CDN.

Вместо search можно написать любое название иконки:

Выбрать можно любую иконку с сайта Icons8 или из приложения под Винду и Мак.

Если точного совпадения по имени не нашлось, мы отдадим что нашли. Часто угадывает: например, в примере выше иконки trump нет, есть donald trump. Но ведь нашлось.

Можно выбрать другой стиль

<img src="https://png.icons8.com/firewall/color">

Всего стилей несколько:

Угадайте, какие самые популярные?

Ответ

первый и последний


Вот тот же список со ссылками. Заходите и будьте как дома, обещаем не приставать:

Можно покрасить

<img src="https://png.icons8.com/batman/2266EE">

Можно указать размер

<img src="https://png.icons8.com/firewall/2266EE/96">

Ради такого случая Icons8 убрал бесплатное ограничение 100х100 пикселов и оставил только 512×512 (чтобы не положить сервер). Но ссылку все равно ставить нужно.

CDN


Все хостится на KeyCDN  — он на хорошем счету. Для нас с вами все бесплатно — они большие молодцы и нас спонсируют. Так что можно использовать иконки в коммерческих проектах: все будет работать и не упадет.

Конечно, при первом запуске иконке надо сгенериться, накраситься и доползти до ближайшей ноды — на это уйдет полсекунды. Зато потом все быстро.


Пинг 1 мс до Билайна, 18 мс — до Ульяновска. И даже до моего Буэнос-Айреса… доходит.

Вопрос из зала: так есть же уже Font Awesome, Material Icons?


Есть, и тоже с CDN, и тоже можно включать одним кодом. Но у них их очень мало, около 600 и 900 соответственно. А у нас 46,000, сами рисовали.

Кстати, если у вас Font Awesome, можете заменить на наши Line Awesome. Они, кажется, более сексапильные (по крайней мере, по нашей аналитике). Ну и Material у нас на 4200 иконок.

Идея


Вообще-то не наша, а microicon. Большое спасибо автору за идею.

Вопрос из зала: а зачем вы нужны?


У него 1327 опенсорсных иконок, а у нас — 46000 уникальных. Кстати, опенсорсные мы тоже выложили, 9000 штук.

Вопрос из зала: что, вставлять иконку не глядя?


Действительно, чтобы увидеть, что нашлось, нужно открыть страницу (а перед этим, возможно, скомпилировать фронт). Но есть способы получше.

Если вы используете WebStorm, PhpStorm и тому подобное, он при наведении показывает картинку.

Под Visual Studio Code есть плагины. Например, Image Preview.

Как помочь


  • Поставьте на нас ссылку с сайта, где используете наши иконки. SEO — это наше все.
  • Это не обязательно, но если не хотите ставить ссылку, можно купить платную лицензию
  • Расскажите о нас соседу по этажу. Ну или зашарьте этот пост.
  • Потестить поиск. Мы переписали алгоритм, должен быть хорошим и очень быстрым (до 1 мс + расходы на транспорт). Посмотреть всю выдачу (а не только первый результат), можно в черновой утилите.
  • Потестить растеризацию. Если что-то съехало, вылезло за границы или размазалось, поправим.

Оформление ссылок цветом и иконками из favicon / Habr

Недавно наткнулся на интересную JS библиотечку для оформления ссылок в тексте. Идея, возможно, не нова… но в целом такая схема мне кажется интересной и удобной для пользователя.

Пример

Суть в том, что к ссылке скриптом добавляется favicon сайта, на который она ведет. А также, различным цветом выделяются ссылки разного типа.

Если подробнее, то ссылки в тексте оформляются:

  • Разным цветом (стилем), в зависимости от того, куда ведет ссылка… внутренняя ссылка, ссылка на поддомен, внешняя, якорь или ссылка на адрес электронной почты. Пользователю сразу видно куда он переходит, без наведения на ссылку.
  • Также в зависимости от типа перед ссылкой добавляется иконка:
    — Для внутренней ссылки и поддоменов – установленная заранее картинка. Или иконка типа файла, если линк ведет на файл.
    — Для внешних ссылок – иконка favicon сайта, куда идет ссылка. По хосту ссылки находится favicon, если его нет – картинка по дефолту. Если favicon узнаваем, то сразу понятен сайт назначения. Например, поиск в яндексе или в imageгугле.
    — Для ссылок на файл соответствующая иконка файла. Есть массив с набором расширений и соответствующих им иконок. Работает, конечно, только при прямой ссылке на файл.
    — Для почтовой ссылки и якоря тоже свои иконки.

Скрипт
Пример

Для использования достаточно включить js-файл на странице:

  1. <script type="text/javascript" src="http://oopstudios.com/dlink/dlink.js"></script>

И добавить нужный текст в блок с классом “dlink”:

  1. <div>
  2.    ваш <a href="#">ссылка</a> текст...
  3. </div>

Стили для ссылок разного типа:

  1. a.internal {color: #D47700;}
  2. a.external {color: #0074D4;}
  3. a.subdomain {color: #D43500;}
  4. a.email   {color: #00B235;}

В принципе, несложно написать что-нибудь подобное под себя или модифицировать этот скрипт, добавив картинки под разные типы ссылок на своем сайте. Например, ссылки на новости или на профиль пользователя.
Подумал, что вероятно проще сделать такую вещь на сервере, но есть проблема, что при проверке наличия favicon у внешнего ресурса, ответ может быть довольно долгим. В этом плане реализация на клиенте никаких проблем не доставляет.

Привязываем иконку к каждому типу файлов на CSS / Habr

Предположим, что нам нужно сделать страничку, на которой будут выкладываться файлы разных типов (архивы, картинки, документы), и при этом мы хотим, чтобы каждый тип файла выделялся, но для того, чтобы его выделить пользователю, который добавляет файл, не придется утруждаться прописыванием стилей или классов. И не надо требовать от разработчиков модификации серверной части (чтобы та выводила ссылки с иконками).

Это все очень просто можно сделать при помощи CSS.

Каждый файл у нас — это ссылка.
Итак:

<a href='downloads/myArch.zip'>myArch.zip</a>

* This source code was highlighted with Source Code Highlighter.

Теперь прописываем общий стиль в CSS:

a{
  padding-left: 18px;
  background-position: 0 0;
  background: transparent url(icon.png) no-repeat;
}

* This source code was highlighted with Source Code Highlighter.


То есть мы задали смещение для текста ссылки на 18 пикс влево, и установили картинку в фон. Эта картинка будет показываться по-умолчанию, то есть если пользователь добавит файл, не описанный нами.

Теперь приступим к описанию типов файлов:

a[href $='.pdf'] {
  padding-left: 18px;
  background-position: 0 0;
  background: transparent url(pdf.png) no-repeat;
}
a[href $='.zip'] {
  padding-left: 18px;
  background-position: 0 0;
  background: transparent url(zip.png) no-repeat;
}

* This source code was highlighted with Source Code Highlighter.


И т.д. то есть мы прописываем для каждого типа файла свою иконку и свой стиль (в принципе, мы можем даже подсвечивать каждый тип файла своим цветом).


Пример отображения архива, в html написано только:

<a href=psycho.zip>psycho.zip</a>

* This source code was highlighted with Source Code Highlighter.


Живой пример

PS: Это мой первый хабратопик, не судите строго.

Разное оформление внутренних и внешних ссылок с помощью CSS : WEBCodius

Приветствую всех! Иногда может понадобиться, чтобы на сайте ссылки ведущие на другие порталы отличались от ссылок ведущих на внутренние страницы сайта. Либо рядом с ссылками на документы отображались иконки типа документа. Такое различное оформление внешних и внутренних ссылок можно встретить на многих крупных интернет-порталах. Например, на известном всем сайте Википедии, рядом с внешними ссылками располагаются особые значки.

Такое различное оформление легко реализовать с помощь правил CSS, в частности c помощью псевдоклассов и специальных селекторов.

Для примера, уберем подчеркивание у всех внутренних ссылок, а для внешних ссылок это самое подчеркивание добавим. 

Если Вам еще не известно, то добавлять или отменять подчеркивание можно с помощью свойства text-decoration. Сначала убираем подчеркивание у всех ссылок на сайте с помощью правила:

a{
  text-decoration: none;
}

Далее с помощью селекторов атрибута укажем, что для всех ссылок, у которых в атрибуте href отсутствует название домена, добавить подчеркивание. Кроме того можно поменять цвет внешних ссылок. Для этого с помощью селектора атрибута [href^="http://"] отберем все ссылки, у которых значение атрибута href начинается с http:// (за это отвечает оператор ^=). А с помощью псевдокласса not исключим из этого списка все ссылки у которых в значениях атрибута href встречается название текущего сайта (оператор *=), в моем случае это webcodius.ru. В результате получится такой код:

a[href^=»http://»]:not ([href*=»webcodius.ru»]),
a[href^=»https://»]:not ([href*=»webcodius.ru»]),
a[href^=»ftp://»]:not ([href*=»webcodius.ru»]) {
  text-decoration: underline;
  color: green;
}

Чтобы код работал на вашем сайте вместо названия моего сайта webcodius.ru добавляете название своего.

Полный код примера:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=»utf-8″>
    <title>Оформление внешних ссылок</title>
    <style>
      a{
        text-decoration: none; /* Отменяем все эффекты для ссылок */
      }
      a[href^=»http://»]:not ([href*=»webcodius.ru»]),
      a[href^=»https://»]:not ([href*=»webcodius.ru»]),
      a[href^=»ftp://»]:not ([href*=»webcodius.ru»]) {
        text-decoration: underline; /* добавляем подчеркивание для внешних ссылок */
        color: green; /* делаем внешние ссылки зеленого цвета */
      }
    </style>
  </head>
  <body>
    <p><a href=»https://ru.wikipedia.org»>Ссылка на внешний сайт</a></p>
    <p><a href=»http://webcodius.ru/spravochnik-css/psevdoklassy-i-psevdoelemety-v-css-hover-before-first-child-i-drugie.html»>Ссылка на страницу текущего сайта</a></p>
  </body>
</html>

Посмотреть пример

Как вставить иконки к ссылкам

Бывает нужно к ссылкам на различные типы документов добавить соответствующие им иконки. Например, чтоб рядом ссылкой на вордовский документ отображалась иконка word-а, а рядом с ссылкой на pdf-документ размещалась иконка Adobe Reader-а и так далее. Для этого подготавливаем иконки документов:

Документы Word: иконка word, таблицы Excel иконка excel, Документы pdf иконка adobe reader, zip-архив иконка zip 

И далее с помощью все тех же селекторов атрибутов добавляем правила CSS. Например, для ссылок на вордовские документы правило CSS будет таким:

a[href$=’.doc’], a[href$=’.docx’] {
  background: url (icons/doc.png) no-repeat 100%;
  padding-right: 18px;
}

В селекторе [href$='.doc'] оператор $= означает, что правило будет выполняться для всех ссылок у которых значение атрибута href заканчивается на .doc (расширение документов Word). А само правило добавляет к ссылкам в виде фона иконку word-а. Для в свойстве backgroundуказываем путь к иконке url(icons/doc.png).

И так добавляем правила для всех нужных типов документов.

Полностью код примера:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=»utf-8″>
    <title>Иконки рядом с ссылками на документы</title>
    <style>
      a[href$=’.doc’], a[href$=’.docx’] {
        background: url (icons/doc.png) no-repeat 100%; /* вставка иконки */
        padding-right: 18px; /* вставка иконки */
      }
      a[href$=’.xls’], a[href$=’.xlsx’] {
        background: url (icons/xls.png) no-repeat 100%;
        padding-right: 18px;
      }
      a[href$=’.zip’] {
        background: url (icons/zip.png) no-repeat 100%;
        padding-right: 18px;
      }
      a[href$=’.pdf’] {
        background: url (icons/pdf.png) no-repeat 100%;
        padding-right: 18px;
      }
    </style>
  </head>
  <body>
    <p><a href=»document.doc»>Ссылка на Word</a></p>
    <p><a href=»document.xls»>Ссылка на Excel</a></p>
    <p><a href=»file.zip»>Ссылка на zip-архив</a></p>
    <p><a href=»document.pdf»>Ссылка на pdf</a></p>
  </body>
</html>

Посмотреть пример

Таким образом можно добавить иконки для любого типа документа. На этом все. До новых встреч!

Как добавить значок для внешних ссылок на своем WordPress сайте

Вы наверняка встречали маленький значок стрелочки рядом со ссылками на сайтах типа Wikipedia. Задачей этой иконки является индикация ссылки, ведущей на сторонний сайт. Это часто применяется на правительственных или обучающих сайтах, потому как позволяет пользователям понять, что они покинут текущий сайт, если нажмут и перейдут по внешней ссылке. В сегодняшней статье мы покажем вам как добавить значок внешней ссылки на сайт WordPress.

externallinkindicator[1]

Первым делом вам необходимо установить и активировать плагин External Links. После активации переходим на страницу Настройки » External Links для конфигурации настроек плагина.

addicon[1]

Как вы видите, плагин умеет намного больше, чем просто добавлять значок рядом с внешними ссылками. Он умеет добавлять атрибут nofollow ко всем внешним ссылкам в WordPress.

Также вы можете активировать возможность открывать внешние ссылки в новом окне, а также добавлять исключения в случае необходимости.

Однако, если же вам нужно просто добавить значок для внешних ссылок, тогда отметьте галочку рядом с опцией ‘Add Icons’.

Не забудьте нажать на кнопку сохранения изменений.

Теперь все готово, и вы можете перейти на свой сайт, где увидите небольшой значок рядом с внешними ссылками на WordPress сайте.

Добавляем собственный значок для внешних ссылок в WordPress

Иконка, используемая для внешних ссылок, это небольшой файл изображения. Если в хотите заменить его на свой собственный значок, то это можно сделать вручную.

Вам нужно будет создать маленькую иконку в формате png с помощью Photoshop или GIMP. Размер по-умолчанию для значка — 10?10 px, и вам нужно использовать именно этот размер. Также потребуется сохранить файл значка под именем ‘external.png’.

После создания значка загрузите его в папку плагина. Для этого просто подключитесь к своему сайту с помощью FTP, а затем перейдите в папку:

/wp-content/plugins/sem-external-links/

Именно сюда нужно положить файл со значком. Ваш FTP клиент предупредит о том, что файл с таким именем уже существует. Необходимо подтвердить замену и перезапись дефолтного файла значка на свой.

Вот и все, можно перейти на свой сайт и увидеть собственноручно созданный значок рядом с внешними ссылками.

Мы надеемся, что эта статья помогла вам выделить внешние ссылки на своем WordPress сайте.

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.

VN:F [1.9.22_1171]

Rating: 5.0/5 (3 votes cast)

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *