Перейти к публикации

Создаем собственный шрифт из иконок для сайта. Пошаговая детальная инструкция...


Описание документа

В этой статье-уроке я расскажу вам как создать свой собственный шрифт для веб-сайта, используя собственноручно созданные иконки.

Как-то я решил создать свой собственный шрифт похожий на FontAwesome для моего игрового сайта...

Снимок.PNG

В этой статье-уроке я расскажу вам как создать свой собственный шрифт для веб-сайта, используя собственноручно созданные иконки. Все, что нам для этого понадобится – программа для создания векторной графики(Adobe Illustrator или Inkspcape) и доступ в интернет!Итак, приступим! Все использованные изображения, иконки и css шрифт этого вы сможете скачать в конце статьи.

Подготовка векторных иконок

Для этого урока мы сделаем что-то простое. Для первой иконки мы нарисуем обычную звездочку. Для второй иконки – орла с буквой W внутри. Нарисовать это достаточно легко и вы можете создать любые формы и комбинации. Я использовал иллюстратор для этих целей.

Онлайн генератор с PNG в SVG

Image to Vector.png

После того, как вы закончили творческую часть – ваше творение необходимо сохранить в SVG формате. Жмем “Сохранить Как” и выбираем тип файла как SVG. Теперь можно переходить непосредственно к созданию шрифта.

Подготовка векторных иконок

Подготовка векторных иконок

Создание собственно шрифта

Для этих целей мы используем популярный и бесплатный сервис IcoMoon.

Первое, что нужно сделать – создать новый проект, поэтому кликаем на меню в левом верхнем углу и нажимаем “New Project”. Далее подгружаем наши готовые svg файлы после нажатия на кнопку “Import Icons”. Проделав эти шаги вы должны видеть у себя на мониторе изображение такого рода:

Создание собственно шрифта

Создание собственно шрифта

Далее выделяем курсором наши иконки (они будут обведены оранжевой рамкой при выборе) и жмем кнопку “Font >” внизу экрана.

Теперь у нас есть возможность изменения кода для каждой иконки (в нашем случаем это будет e600 и e601), названия нашего шрифта, префикса для CSS и так далее. Все это осуществляется в “Preferences”. Также, мы можем посмотреть шрифт в действии, нажам на ссылку “Enable Quick Usage” – что позволит получить временную ссылку на наш шрифт, а также опцию просмотра кода в CodePen.

Создание собственно шрифта

Создание собственно шрифта

После того, как вы все настроили – нажимаем кнопку “Download” внизу страницы и скачиваем архив. В этом архивы вы найдете ваш шрифт в форматах ttf, eot, svg и woff + демо-страничку со шрифтом.

Создание собственно шрифта

Использование иконок на сайте

Теперь, все что нам нужно – это подключить шрифт CSS при помощи @font-face, и указать другие параметры (они все прописаны в css-файле в архиве, который вы скачали. Закинул свой шрифт в корень сайта и подключил через css

@font-face {
  font-family: 'game-font';
  src:  url('/fonts/game-font/game-font.eot?pgclei');
  src:  url('/fonts/game-font/game-font.eot?pgclei#iefix') format('embedded-opentype'),
    url('/fonts/game-font/game-font.ttf?pgclei') format('truetype'),
    url('/fonts/game-font/game-font.woff?pgclei') format('woff'),
    url('/fonts/game-font/game-font.svg?pgclei#game-font') format('svg');
  font-weight: normal;
  font-style: normal;
}

game {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'game-font' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a[data-navitem-id="68"]:before {
    color: #fff;
    content: "\e902";
    font-family: game-font;
}
a[data-navitem-id="70"]:before {
    color: #fff;
    content: "\e903";
    font-family: game-font;
}
a[data-navitem-id="35"]:before {
	color:#fff;
	content:"\f1e8";
	font-family:FontAwesome;
}
a[data-navitem-id="35"] {
	background:rgb(75,49,124) !important;
	color:white !important;
	box-shadow:0 0 15px #6441A5,0 0 10px transparent;
}

 


 Отправить жалобу

×