Интересное решение от японского типографа Kazuyuki Motoyama: Иконки-Шрифт
Очень интересное решение от японского типографа Kazuyuki Motoyama. Это шрифт в виде иконок. Иконок в этом шрифте больше 200 штук! Прекрасно подойдут для создания современного дизайна интерфейса сайта. И очень удобно! Нужно лишь прикрепить шрифт и вызывать нужную вам иконку вот таким вот html кодом:
<div class="table"><table><td class="lsf symbol">mobage</td></table></div>
меняя лишь название. Все иконки вы можете просмотреть нажав на "Демо". Обязательно обратите внимание на эти иконки-шрифт. Иконки достаточно хорошего качества! Здесь есть и смайлики и логотипы известных компаний и иконки из Ворда. Я думаю тут есть все икокни, которые могут понадобиться для создания любого интерфейса сайта.
Установка библиотеки иконок проста до нельзя:
Подключаем скачанные шрифты с помощью 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;}
и прописываем html код, например:
<h1 class="lsf-icon" title="opera">Opera</h1>
Надеюсь вы обязательно закинете страницу "Демо" этого топика в закладки, так как очень удобная вещица эти иконки-шрифт.
Просто изумительная сборка монохромных иконок вышла, пользуйтесь на здоровье!
Комментарии ()