Мы предлагаем:У нас есть:
1 базу данных MySQL(50MB)PHP 5
Прикрепление своих доменовMySQL
Предустановленные движки сайтовPerl
Место под файлы(300MB)Ruby
Бесплатно и без рекламы!
Авторизация:
e-mail: Пароль:
Забыли пароль?    Запомнить  
Все блогиSoftware → FontAwesome - к чёрту картинки!
Rss

Если посмотреть на некоторые сложные сайты, то легко увидеть, что есть много значков, вариации которых используются в самых разных местах. Отчасти такие значки стали встречаться ещё чаще из-за появления HTML5, который сделал веб-приложения ещё популярнее. До его нашествия на мир интернета такие значки встречались на форумах, во флэш-приложениях, часто в софте и бумажных журналах, газетах. Обычно это значки какого-то общего толка: стрелочки, кружки, простые символы вроде сердечка и звёздочки.

Конечно, этот факт не остался незамеченным, и начали появляться пакеты значков, предназначенные для дизайнеров, вроде таких. Не так давно появился Twitter Bootstrap, и его разработчики договорились с создателями Glyphicons о предоставлении пакета значков для всех разработчиков на Bootstrap на бесплатной основе. Однако довольно быстро обнаружились весомые недостатки такого подхода к таким “универсальным значкам”. Их не всегда можно применить в произвольном месте страницы. В некоторые дизайны не подходят ни белые, ни тёмно-серые значки, а также иногда необходим такой размер, которого в графике нет. Для любого из таких случаев значки необходимо редактировать или вовсе перерисовывать – при этом сохранить качество значков не всегда так уж просто.

И если нужна альтернатива – то она есть.


Да, это всё текстовые символы. Поскольку подгрузить шрифты прямо сюда я не могу, здесь это картинки – но ссылка, которая находится на них, приведёт вас к целой тонне живых примеров.
На самом деле, CSS – почти единственный довод использовать именно шрифт со значками, нежели обычные растровые значки. Но хоть и довод и единственный – но очень весомый. Разберёмся, почему.
Во-первых, писать цветными буквами умеет любой мало-мальски знающий HTML. Интереснее то, что значки – тоже текст. Технически. Поэтому менять им цвет можно без каких-либо проблем.
Во-вторых, для текста существуют эффекты в CSS. Их не так много, но способов их использования достаточно. Можно сделать тексту необычную тень (к примеру, чтобы текст выглядел вдавленным в страницу).
В-третьих, шрифт – штука векторная. Как ни растягивай значок, он не потеряет в качестве и форме, не станет занимать больше памяти и дольше загружаться. И при масштабировании страницы будет очень неплохо смотреться.

Хоть изначально этот шрифт делался для Twitter Bootstrap, связан он с ним только тем, что его CSS подменяет суффиксы для аналогичных значков в Bootstrap. Но если уж вы этот шрифт используете именно с ним, перекомпилируйте Bootstrap, убрав значки. Просто сэкономите место. Не сильно много, но кое-что.

Ах да, ещё у вас мог возникнуть вопрос – зачем там CSS. Отвечаю – во-первых, в нём указаны ссылки на файлы со шрифтами (разным браузерам – разные шрифты, привет костылям совместимости), во-вторых – у вас заболит голова, если вы будете подбирать символы под каждый значок по специальному списку. В CSS указаны хорошие словестные названия для каждого значка. Если вы знаете английский – вы сможете легко запоминать уже увиденные обозначения.

Напоследок – вы можете скачать весь шрифт целиком, а можете воспользоваться icnfnt, чтобы собрать шрифт без лишних символов, дабы сэкономить место. А если у вас есть идеи о том, какие значки добавить – в проекте на Github с радостью рассмотрят ваши предложения.

PS: но будьте внимательны – если вы хотите покрыть не просто ряд последних версий популярных браузеров, а как можно больше браузеров – этот вариант вам не очень подходит, поскольку шрифты не везде работают так, как должны. В особенности, это относится к Internet Explorer (в 7 работает, в 10 жалуются) и некоторым хостингам. Благодаря cyber01 (настроил сервер) и мне (нашёл шрифт) у нас всё работает, проверено. В случае с максимальным покрытием вам лучше подойдут растровые значки.


Автор: Павел | Дата создания: 24 января 2013, 18:35 UTC | +1.037


Комментарии(2)
Денис  25 января 2013, 04:47 UTC  #
0.0
Index

О, мое любимое. Возможно у меня больной вкус, но мне нравится делать сайты используя только текст. Иногда проще что-то заменить картинкой, но сделать тоже самое с помощью css доставляет удовольствие. А для кнопок использовать такие символы.

Я не понял только почему не получилось вставить их сюда, ничего кроме поддержки utf-8 это не требует, хотя корректнее вставлять html-код символа. Так же очень не явна полезность сайта, потому что в той же Windows уже есть таблица символов вот уже почти 20 лет. Хотя на FontAwesome похоже отобрали самые адекватные, и покрупнее сделали, безусловно так лучше. Чего уж там, и удобнее.

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

Павел  25 января 2013, 05:20 UTC  #
0.0
2bfe965ab5ef94a0568bc61c36b46d4c

На то есть несколько причин.
Во-первых, есть не только Windows, и не только MS-овские шрифты.
Во-вторых, там есть полезные значки, которых среди стандартных однозначно нет. Помню, я шастал по *dings’овским шрифтам в Windows, использовал их в Вебе лет эдак… 5 назад. Круто. Но теперь я вырос, и выросли требования совместимости, в которые MS’овские шрифты не вписываются. А FA – вполне.
В-третьих, если нужны только некоторые значки – можно собрать на icnfnt нужный набор.

Сюда их не сразу получилось вставить, поскольку серверный софт не знал, что делать с файлами шрифтов, и в итоге просто не отдавал их, пока cyber01 не указал к ним MIME-типы. Почему не вставил в статью – потому что это, всё-таки, новый шрифт. Как его подключить в Textile – не представляю.

CSS, по сути, как раз вставляет HTML-код символа на место тега при помощи атрибута content, а также указывает шрифт. Ничего мудрёного JS’ового.


Простите, Ваш браузер не поддерживает html5
Управление стрелками. Пробел - пауза.