Меню с гамбургером

20 Декабря 2016, 02:16

Для использования иконки гамбургера в мобильном меню, часто используют иконки из fontawesome (подгружая для этого весь шрифт с иконками). Что, несомненно является неоправданной тратой ресурсов. Так, например, файл шрифта может весить от 70 до 120кб, в зависимости от формата, что зачастую превысит размер кода самой страницы.

Что бы не пересобирать шрифт с нужными глифами, есть прекрасный вариант с svg-иконками icomoon.io - который позволяет экспортировать любой нужный глиф в svg-формате.

Например, что бы добавить гамбургер в страницу, нужно добавить в CSS:

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

Определить символ в теле страницы:

<symbol id="icon-menu" viewBox="0 0 32 32">
<title>menu</title>
<path class="path1" d="M2 6h28v6h-28zM2 14h28v6h-28zM2 22h28v6h-28z"></path>
</symbol>

Добавить саму иконку:

<svg class="icon icon-menu"><use xlink:href="#icon-menu"></use></svg>