<MyRusakov.ru />

Программирование на JavaScript с Нуля до Гуру 2.0

Программирование на JavaScript с Нуля до Гуру 2.0

Данный курс научит Вас программировать на языке JavaScript, который крайне желательно знать любому уважающему себя программисту. Курс состоит из 8 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности. В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров, в том числе, и из моей практики.

Дополнительно, почти к каждому уроку идут упражнения.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Библиотека jQuery», «Защита JavaScript-кода от копирования», «Решение упражнений из курса», «HTML для начинающих» и «CSS для начинающих».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Иконочные шрифты IcoMoon

Иконочные шрифты IcoMoon

Сегодня мы поговорим о сервисе IcoMoon, который позволяет создавать шрифтовые иконки для различных проектов. Что же это за шрифты и в чем их преимущества? Дело в том, что это как простой символ шрифта, только отображается в виде иконки, что значительно уменьшает нагрузку на сервер при загрузки.

Раз это шрифт, то можно использовать стили для его редактирования - изменять цвет, масштабировать без потери качества, добавлять тени.

Векторизация растровых изображений

Обычно к макетам, сделанных на заказ, дизайнеры прикладывают иконки в формате SVG. Что делать если вам попался на верстку макет без специально подготовленных векторных иконок? Вставлять их на сайт в растровых форматах PNG или JPG, не вариант, из-за пикселизации на больших разрешениях. Сделаем экспорт иконок в PNG и займемся их векторизацией. Для векторизации воспользуемся онлайн-конвертером pngtosvg.


Шаг 1: Выберите изображение в формате PNG или JPG на своем компьютере.

Шаг 2: Выберите количество палитр для вашего выходного векторного файла.

Шаг 3: Установите опцию Упростить, чтобы сгладить вывод.

Шаг 4: Нажмите «Создать»


Иконочные шрифты IcoMoon.

Как создать иконочный шрифт?

Для того чтобы создать свои собственные CSS шрифты с иконками, вам необходимо перейти в раздел IcoMoon App, загрузить SVG изображения и нажать на кнопку «Generate Font».


Иконочные шрифты IcoMoon.

После генерации вас перебросит на страницу предварительного просмотра, где есть возможность переименовать название иконок и получить код для установки на сайт.


Иконочные шрифты IcoMoon.

Иконочные шрифты IcoMoon.

В свойствах обязательно отметьте поддержку старых браузеров.


Иконочные шрифты IcoMoon.

Далее скачиваете (кнопка Download) и распаковываете архив.

Как установить иконочные шрифты на сайт?

В данном архиве есть папка Fonts, содержащая шрифт icomoon в различных форматах. Загружаете эту папку на хостинг. В папке с архивом вы увидите файл style.css. Копируете все стили из этого файла и вставляете в основной файл стилей у вашего сайта. Есть и альтернативный вариант - переименовать этот файл и подключить его отдельным файлом стилей. Будьте внимательны с путями до папки Fonts, ведь в вашем проекте может быть другая структура расположения папок.

В скаченном архиве еще есть demo.html, откуда можно взять код иконки и вставить в нужное место на странице.

<span class="icon-phone"></span>

Как установить иконочные шрифты на WordPress?

Загрузим по FTP папку Fonts в тему WordPress.

В админке WordPress перейдем во вкладку -> «Внешний вид» -> «Редактор тем» -> «Таблица стилей (style.css)» и перенесем стили в начало основного файла стилей. Для вывода иконок на сайте, вставляем тег span с определенным классом в нужное место исходного кода.

Библиотека IcoMoon насчитывает 5500+ бесплатных иконок.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.