IcoMoon
Думается мне, самый (один из, все же) удобный сервис для создания иконочных шрифтов — это IcoMoon. В бесплатном режиме можно выбрать нужные значки и с легкостью встроить их в страницы сайта. Сервис предлагает несколько коллекций разнообразных значков-иконок, за деньги можно и того больше. Но что самое интересное, помимо готовых коллекций, можно загрузить и свои личные иконки, создав шрифт и при желании дополнительные графические файлы (предполагается, что svg у вас уже имеется, как исходник) — png, svg и pdf впридачу…
Ассортимент значков очень широкий на компьютерно-информационную тематику с уклоном в онлайн-сервисы. То что современный доктор прописал для 95% веб-десигнеров. Остальные 5 могут, как я уже отметил, присовокупить свои личные творения.
Подключается полученный шрифт (4 шрифта разного формата) довольно просто: в директорию, где лежит сайт или шкура блога, копируется папочка со шрифтами, а в файл со стилями переносится содержимое style.css (как вариант, можно этот файл подключить отдельно ссылкой в <head>, особенно, если код большой т.е. коллекция иконок насчитывает от десятков до сотен штук, и чтобы не забивать имеющийся стилевой файл…). Проверяем соблюдены ли пути ко всем полученным шрифтам/папкам и пользуемся.
Каждый значок называется особым образом, а в стилях прописан для него класс со свойствами. И нам остается вызвать его на свою страницу вот таким незамысловатым кодом:
<span class="icon-pencil2"></span> — что даст такой результат на выходе:
Для чего использовать, например, для украшения внешних ссылок.
Для плюшек-менюшек , для замены слов картинкой . Применений множество.
Однако эти значки не всегда и не везде выглядят красиво, особенно в мелком размере. И часто плохой рендеринг браузерами таких веб-шрифтов заставляет использовать иные решения, напрямую работать с svg. Хотя с отображением его сопряжено немало трудностей, и не всегда можно этот формат встроить так, чтобы иметь возможность влиять на него css-стилями. А шрифт, полученный из icomoon, как видим, наследует стили той строки или параграфа, где он вставлен. Однако, заметно, что, «по умолчанию», значки немного выбиваются из приятной глазу линии текста, поэтому для «рабочего» применения нужно обязательно играться со стилями, к примеру, задать выравнивание по vertical-align:text-bottom; — .
Я-то искал для блога подходящие стрелочки для скроллинга «вверх-вниз», в итоге все равно пришлось использовать svg. Но пара шевронов в навигации в режиме одиночной заметки, прижились я думаю. Более изящное решение, чем предыдущее. Подумал было заменить в нижней плашке поста название «Рубрика» и «теги» на значки. Но они так отвратно выглядели, что я вообще убрал все. И ничего. Где рубрика, где тег — понятно и так. Да и не принципиально.
Несколько однотемных публикаций:
- 03.11.2015 Gym!
- 31.10.2015 CSS: transition & browsers
- 28.10.2015 Плагин для техобслуживания и редизайн
- 25.10.2015 Skisport
- 25.10.2015 Don't let idiots ruin your day
- 07.10.2015 Быстрая визитка
- 06.10.2015 Che следит за тобой