Font Awesome

-

Не могу пройти мимо такого замечательного и наверняка известного многим профессионалам символьного шрифта, как Font Awesome. Суть в том, что у этого шрифта нет букв в принципе, однако в нем содержатся иконки, необходимые для формирования UI, начиная иконками навигации, заканчивая иконками социальных сетей, в том числе российских (таких как ВКонтакте, Одноклассники и иже с ними), кроме того есть иконки таких профильных соц-сетей, как Behance и LinkedIn. Также содержатся иконки различных технологий – jQuery, HTML, CSS… Доступен шрифт как для локального использования, так и для использования в рамках сайта. Более того, он содержит анимированные(!) иконки (так называемые спиннеры), которые прекрасно подойдут для иллюстрации загрузки страницы, обработки данных или выполнения длительных действий (математические расчеты, рендер, поиск по огромным базам данных и т.д.)

Комментарии

Отправить комментарий

Популярные сообщения из этого блога

Анимация курсора в Атоме

-
Изображение
Оказывается в Атоме это сделать совсем нетрудно, а эффект получается очень даже зачетный). Для этого достаточно в стили (меню atom->Stylesheets) добавить следующую строку: .cursor, atom-text-editor::shadow .cursor { transition: 150ms; } Можно добавить небольшой Bounce-эффект за счет использования функции cubic-bezier , тогда год будет выглядеть так: .cursor, atom-text-editor::shadow .cursor { transition: 150ms cubic-bezier(.31,.16,.12,1.24); } (UPDATED) Не так давно Atom начал выдавать уведомление об устаревшем селекторе .cursor, atom-text-editor::shadow .cursor. Для того, чтобы можно было дальше продолжить использовать анимированный курсор необходимо заменить данный селектор на .cursor, atom-text-editor.editor .cursor
Далее...

Подключение тяжелых библиотек

-
Изображение
В процессе верстки столкнулся вот с какой проблемой: необходимо подключить карту на сайт, однако, ее нужно подключить до подключения основного скрипта, поскольку процедура инициализации карт происходит именно там. Вылилось это вот в какую проблему. До полной прогрузки библиотеки с картой не подключались прописанные эвенты. Менять порядок загрузки нельзя, но немного погуглив, получилось найти достаточно простое и эффективное решение: подключать карту «на лету» непосредственно из самого скрипта, а инициализацию производить уже в коллбэке функции. В результате получилось что-то такое: //Вызов функции $('document').ready(() => { loadScript("https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js", () => { mapInit(); } }) //Функция подключения loadScript = (url, callback) => { var script = document.createElement("script") script.type = "text/javascript"; if (script.readyState){ /...
Далее...

Fontello

-
Изображение
Не могу пройти мимо такого интересного сервиса, как Fontello . В одном из своих постов я рассказывал за символьный шрифт FontAwesome , содержащий множество символов. Но тут я наткнулся на сервис Fontello. FontAwesome содержит множество символов (2 481, если быть совсем точным), но здесь вчерашнее преимущество оборачивается неприятностями. Во-первых, все эти 2 481 символов нужно загрузить. Во-вторых, может случится, что нужного символа таки не окажется в наборе FontAwesome, а окажется в другом наборе. Подключать еще один символьный шрифт? И вот тут приходит на выручку Fontello. Это генератор символьных шрифтов, который позволяет создать новый шрифт на основе нескольких символьных шрифтов (Fontelico, FontAwesome, Entypo, Typico, Iconic, Modern Pictograms, Meteoicons, MFG Labs, Maki, Zocial, Brandico, Elusive, Linecons, Web Symbols), в который Вы можете включить только те иконки, которые Вам действительно нужны. На выходе вы получаете архив со всеми стилями, файлом шрифта в неск...
Далее...