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), в который Вы можете включить только те иконки, которые Вам действительно нужны. На выходе вы получаете архив со всеми стилями, файлом шрифта в нескольких форматах (WOFF, WOFF2, EOT, TTF, SVG). Мое мнение – однозначный must have). Пользуйтесь на здоровье!

Комментарии

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

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

MODx Evo и ReCaptcha v2

-
Изображение
При разботке сайтов часто возникает необходимость защитить формы обратной связи от спамботов которые, обычно, сводятся к неудобному полю ввода цифр и букв. Google создал прекрасное решение этой проблемы - reCAPTCHA и для Modx Revo существуют готовые решения по ее установке, а вот для Modx Evo, к сожалению нет. Сейчас мы это исправим. По порядку: Прежде всего нужно получить ключи для сайта (siteKey и secretKey) - здесь Скачиваем готовую PHP библиотеку каптчи здесь (GitHub – Clone or download, Download ZIP) Из архива, вытаскиваем папку src, закачиваем в папку /assets/snippets и переименовываем эту папку в recaptcha Создаем сниппет ReCaptcha и вставляем в него код указанный в конце статьи В темплейты eForm прописываем плейсхолдер [+ReCaptcha+] в том месте, где хотим ее (reCAPTCHA) видеть (если вы используете в темплейтах вызов veriword.php, закройте его комментарием или удалите) Перед вызовом eForm ставим вызов сниппета ReCaptcha, а в вызов самого eForm добавляем параметры: &a
Далее...

P3D – 3D модель в браузере

-
Изображение
И снова здравствуйте! Порой при разработке 3D модели возникает вопрос – а как показать ее заказчику? Рендер не совсем подходит, так как позволяет посмотреть только статичную картинку с одним ракурсом. Вместе с тем, а как быть, если заказчик хочет «покрутить» модель? Вот тут и приходит на помощь сервис P3D . Этот сервис позволяет загрузить в облако модель в формате OBJ+MTL, и в дальнейшем, с помощью технологии WebGL ее можно посмотреть даже на мобильнике. Взгляните сами – эту модель (представлена ранняя её версия) я загрузил на p3d и внедрил на эту страницу в виде IFRAME Базовый функционал предоставляется на бесплатной основе, дополнительные опции (отключение брендирования, регулировка контролов и т.п. обойдатся в столько, сколько Вы выберите сами – больше функционала, больше цена. Подробнее ). К сожалению, как и множество других качественных ресурсов, сайт англоязычный, так что определенные навыки английского разумеется потребуются, но оно того стоит! Пользуйтесь на здоровье!
Далее...

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

-
Изображение
В процессе верстки столкнулся вот с какой проблемой: необходимо подключить карту на сайт, однако, ее нужно подключить до подключения основного скрипта, поскольку процедура инициализации карт происходит именно там. Вылилось это вот в какую проблему. До полной прогрузки библиотеки с картой не подключались прописанные эвенты. Менять порядок загрузки нельзя, но немного погуглив, получилось найти достаточно простое и эффективное решение: подключать карту «на лету» непосредственно из самого скрипта, а инициализацию производить уже в коллбэке функции. В результате получилось что-то такое: //Вызов функции $('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){ /
Далее...