Монохромные иконки.

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

В наборе присутствует 200 монохромных иконок весь перечень иконок можно глянуть тут. Теперь давайте разберемся как это все работает. Для начала нам нужно скачать архив шрифтов, скачать можно тут. После того как все шрифты скачаны их надо положить рядом с нашим файлом стилей CSS, теперь CSS файл нужно добавить следующие стили:

@font-face {
    font-family: 'LigatureSymbols';
    src: url('LigatureSymbols-2.05.eot');
    src: url('LigatureSymbols-2.05.eot?#iefix') format('embedded-opentype'),
         url('LigatureSymbols-2.05.woff') format('woff'),
         url('LigatureSymbols-2.05.ttf') format('truetype'),
         url('LigatureSymbols-2.05.svg#LigatureSymbols') format('svg');
    src: url('LigatureSymbols-2.05.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.lsf {
  font-family: 'LigatureSymbols';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.lsf-icon:before {
  content:attr(title);
  margin-right:0.3em;
  font-size:130 тут знак процента;
  font-family: 'LigatureSymbols';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
}   

Обратите внимание на строку №30

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

 Твитнуть  

и на выходе у нас получается следующие: Твитнуть

Теперь давайте рассмотрим пример если нам нужно просто вывести иконку в нужном месте без всяких ссылок:

apple

Результат: apple

Как видите все стильно удобно и самое главное добавление иконок без использования графики.

Смотрим наименование иконок тут.