Как создать набор иконок в формате шрифта
Статья, в которой рассмотрим процесс создания иконочного шрифта с помощью сервиса IcoMoon (https://icomoon.io/).
Разработка персонального иконочного шрифта для сайта является одной из основных задач веб-разработчика. Т.к. использование готовых наборов шрифтов, может сильно «утяжелить» загрузку страниц сайта. Это связано с тем, что они содержат большое количество иконок (Font Awesome — 675 иконок, IconMoon — 491, Foundation Icons — 283, Glyphicons Halflings – более 250). В то время как количество иконок, которых реально требуется для оформления среднего сайта, находится в диапазоне от 20 до 50 единиц.
Иконочный шрифт представляет собой обыкновенный шрифт, в котором вместо традиционных символов используются значки (иконки).
Использование иконок в таком формате является очень привлекательным решением. Во-первых, такими иконками очень просто управлять, т.е. изменять их размер, цвет и другие параметры.
Осуществляется это с помощью таких же свойств CSS, которые применяются для стилизации обычного текста (font-size, color и др.). Во-вторых, в формате шрифта иконки находятся в векторном формате. Это означает то, что они хорошо масштабируются и отлично выглядят на экранах устройств с высокой плотностью пикселей. Кроме этого шрифт — это сжатый формат, а значит, для его загрузки может потребоваться гораздо меньше времени, чем для загрузки аналогичных векторных изображений. Ещё одним неоспоримым плюсом шрифтовых иконок является то, что они поддерживаются всеми браузерами. Осуществляется это благодаря созданию на базе одного пакета иконок шрифтов в различных форматах: eot, ttf, svg и woff. Это необходимо выполнить для того, что браузер использовал тот формат шрифта, который он «понимает». Потому что на текущий момент нет ни одного формата шрифта, который бы поддерживался всеми браузерами.
Кроме достоинств у шрифтовых иконок есть конечно и недостатки. Первый связан с тем, что они немного теряют четкость отрисовки при очень маленьких размерах из-за сглаживания. Второй недостаток заключается в том, что с помощью них нельзя реализовать сложную цветную графику. Если у вас к иконкам имеются такие требования, то в качестве их формата лучше использовать svg.
Основный алгоритм действий по созданию шрифта в IcoMoon App
Рассмотрим некоторые основные шаги по разработке шрифта в сервисе IcoMoon App:
- Перейти на страницу IcoMoon App, с помощью кнопки, расположенной на главной странице сервиса или используя URL адрес: https://icomoon.io/app/.
- Ввести название проекта (значок «Manage Projects»).
- Добавить в проект при необходимости шрифт Font Awesome (кнопка с тремя полосочками -> Icon Library).
- Добавить в проект пустой набор, который можно использовать для помещения в него пользовательских (своих) иконок (кнопка с 3 линиями -> New Empty Set).
- Задать название только что созданному набору (кнопка с тремя полосочками -> View / Edit Info).
- Добавить в набор пользовательские (свои) значки (кнопка «3 горизонтальные линии» -> Import to Set).
- Выбрать иконки, которые необходимо добавить в результирующий набор, с помощью инструмента «Select».
- Выполнить генерацию шрифта (нажать внизу страницы на элемент «Generate Font»).
- Нажать на значок шестерёнки и в открывшемся диалоговом окне ввести название шрифта (Font Name), префикс класса (Class Prefix), выбрать опцию «Use a class» (Использовать класс) и указать в поле значение «.icon».
- Нажать на кнопку «Download».
Подключение иконок в формате шрифта к странице
Для установки иконочного шрифта необходимо распаковать архив, созданный сайтом IcoMoon, и перенести из него в рабочий проект каталог fonts (шрифты) и файл «style.
По умолчанию папка со шрифтами должна располагаться в том же каталоге что и файл CSS. Для того чтобы каталог fonts расположить по-другому, необходимо внести соответствующие изменения в файл «style.css».
Подключения шрифта к странице и классов для удобной работы с ним осуществляется посредством файла «style.css».
<!-- path-to - путь до файла style.css --> <link href="path-to/style.css" rel="stylesheet">
При желании содержимое файла «style.css» можно включить в свой файл стилей. Это позволит сократить количество HTTP-запросов и немного увеличить загрузку страницы.
Использование иконок на странице
Применение иконок созданного шрифта на странице осуществляется с помощью элемента i, к которому необходимо добавить базовый класс icon (определяется на основе настройки «Use a class») и класс иконки.
<!-- icon - базовый класс --> <!-- icon-ok - класс иконки ok --> <i></i>
Разработку собственных социальных значков для сайта очень просто выполнить в открытом векторном SVG редакторе Inkscape.
Для этого их можно нарисовать или воспользоваться уже существующими изображениями иконок из бесплатных наборов.
Если вы в качестве исходников будете использовать растровые изображения значков, то их предварительно следует векторизовать.
После подготовки векторных svg-изображений их можно с помощью сервиса IcoMoon собрать в иконочный шрифт.
Создание иконки «Twitter» в InkscapeПример иконок социальных сетей в форме прямоугольника со скруглёнными краями.
Сборка шрифта из созданных иконок в IcoMoonСкачать шрифт с социальными иконками и исходные коды можно по следующей ссылке: https://yadi.sk/d/oaOfUROSyTjDQ.
Использование социальных иконок на странице (классы социальных значков можно посмотреть в файле «style.css»):
<i></i>
Кроме IcoMoon есть ещё и другие онлайн сервисы для создания значков в виде шрифта. К ним относится «fontello.com», «fontastic.me», «glyphter.com», «pictonic.co» и др.
Как изменить размер значков на рабочем столе
Многие знают, что вид элементов в папках можно изменить.
Наверняка большинство юзеров также слышало о том, что иконки десктопа тоже могут менять свой размер: их можно при необходимости увеличить или сделать меньше. Причём некоторые часто сталкиваются с этим напрямую: неосторожное движение пальцами по тачпаду на ноутбуке, и ярлыки и шрифт на рабочем столе вдруг резко выросли или стали меньше. А сделать всё обратно при помощи тех же манипуляций с мышью не получается. Пора уже положить конец этому незнанию.
Как регулировать величину иконок
Увеличить ярлыки на рабочем столе, их шрифт и размер можно разными способами. Один из них, доступный на некоторых моделях ноутбуков на Виндовс 8 и 10, пользователи уже неудачно опробовали. Переходим к другим.
С помощью того же инструмента
Мышка, вот только не встроенная, всё же может послужить во благо. Удерживаем клавишу CTRL и крутим колёсико: значки становятся меньше или наоборот больше. Сделать это просто, и способ не требует копания в различных настройках. Подойдёт как раз тем, кому удалось случайно увеличить или уменьшить иконки рабочего стола.
Контекстное меню
Метод для ленивых. Достаточно щёлкнуть правой кнопкой мыши и выбрать вкладку «Вид» в контекстном меню, чтобы изменить значки. Правда, на выбор тут всего три варианта: мелкие, средние, крупные. В то время как при помощи колеса можно было подогнать иконки под идеальную для себя величину.
Тут же, кстати, ещё несколько удобных функций. Вкладка «Вид» позволит быстро упорядочить значки, чтобы они не шли в разброс по всему рабочему столу, причём есть несколько вариантов сортировки на выбор. Кроме того, ярлыки можно вовсе убрать (не удалить!) — тогда не придётся менять их размер. А заодно здорово напугаете неопытного пользователя.
Способ для Windows 7
Отличное решение было применено для седьмой Винды, которое во многом упростило подгон значков десктопа под идеальный вид. Кликаем ПКМ по свободному месту на рабочем столе и выбираем самую нижнюю графу — «Персонализация». В открывшемся окне можно изменить шрифт иконок, увеличить или уменьшить их, а также выбрать ещё ряд пользовательских настроек по преображению рабочего стола.
К сожалению, в Windows 10 мы можем менять через «Персонализацию» темы, обои и что-то ещё, но вот на значки там повлиять очень трудно.
Windows 10
На десятой Виндовс, как ни бейся, не удастся через те же настройки увеличить или уменьшить размер значков. Это, несомненно, можно считать минусом новой системы. Здесь есть другая специальная вкладка в контекстном меню, которая позволяет влиять на ярлычки. Называется она «Параметры экрана». Там можно, двигая ползунок, изменить ярлыки и всё остальное вместе с ними на рабочем столе. Во всяком случае, для Windows 10 подойдут предыдущие методы.
Текст
Шрифт конечно тоже меняется вместе с ярлычками на десктопе, однако, наверное, многие хотели видеть с ним совсем другие метаморфозы или хотя бы делать текст меньше или больше вне зависимости от ярлыков.
На Виндовс 7 со шрифтами можно сделать всё через ту же персонализацию. На Windows 10 сам шрифт не получится сменить, есть возможность лишь уменьшить/увеличить размер.
- Открываем окно «Панель управления» и меняем параметр просмотра на «Крупные значки»
- Выбираем раздел «Экран».
- В пункте «Изменение только размера текста» можно выставить полужирный для любого выбранного текста: заголовки окон, значки, подсказки и т. п. — а также поменять кегль.
Как видите, есть сразу несколько методов уменьшить или увеличить размер ярлычков, а также их шрифт. Выберете тот, который позволит сделать необходимые изменения.
Icon Font & SVG Icon Sets ❍ IcoMoon
Решения Pixel Perfect Icon
Apple, Google, Microsoft, Samsung, Yahoo
— некоторые из компаний, которые доверились нашим услугам.
IcoMoon стремится создать и предоставить лучший инструмент для создания иконографии и управления иконками для перфекционистов. В библиотеке иконок IcoMoon представлены только самые лучшие наборы иконок. Все наши иконки разработаны на основе точной пиксельной сетки. Приложение IcoMoon позволяет создавать и использовать собственные пакеты значков во многих различных форматах, включая SVG, Polymer, PDF, XAML, CSH, шрифт значков с лигатуры или старые добрые спрайты PNG/CSS.
История
IcoMoon был впервые создан и выпущен еще в ноябре 2011 года. С момента своего выпуска он изменил способ использования значков в Интернете сегодня. IcoMoon представила первый пользовательский конструктор шрифтов для значков, который позволял выбирать значки и преобразовывать их в шрифты.
IcoMoon постоянно совершенствуется и предлагает множество уникальных функций. Мы с гордостью заявляем, что IcoMoon — единственный онлайн-сервис, который создает четкие шрифты для значков с точностью до пикселя.
Для этого генератор шрифтов значков учитывает размер сетки каждого значка и использует правильное выравнивание.
Имея более 5000 открытых и бесплатных иконок, доступных в библиотеке IcoMoon, и позволяя создавать четкие шрифты иконок и спрайты SVG локально/офлайн, этот сервис намного опережает любой аналогичный.
Нужно связаться с нами? Воспользуйтесь нашей контактной формой.
Спасибо за использование IcoMoon. Приложение IcoMoon — это бесплатный сервис. Мы создали его, потому что нам нравятся пиксельные идеальные векторы. Мы пытаемся предоставить лучший инструмент для иконографии. Если вам нравится поддерживать то, что мы делаем, вы можете,
- Купите один из наборов значков IcoMoon
- Стать премиум-пользователем
- Если у вас есть какие-либо отзывы, сообщите нам об этом
- Расскажите своим друзьям об IcoMoon
(поделиться на Твиттер, Фейсбук)
Если у вас есть какие-либо вопросы, посетите FAQ или страницу документации или просто свяжитесь с нами.
Введите символы, показанные на изображении выше, для проверки.
Забыли пароль?
Впервые на IcoMoon? Зарегистрируйтесь бесплатно
Примечание: По умолчанию приложение IcoMoon сохраняет ваши данные локально.
После регистрации вы можете стать премиум-пользователем, если хотите, чтобы ваши проекты сохранялись в вашей учетной записи.