Шрифт иконки: Font Awesome — иконочный шрифт и CSS-инструментарий

Содержание

Иконочные шрифты или SVG — что выбрать в 2018? – База знаний Timeweb Community

Графические иконки — ключевой элемент практически любого сайта или приложения. Как правило, весят они немного, однако вопрос выбора формата все равно остается актуальным. Если не брать в расчет стандартные форматы изображений, у разработчиков есть два основных варианта: использовать SVG либо иконочные шрифты (icon fonts). Что лучше? Разберемся ниже.

Эволюция иконок

Перед тем, как появился язык стилей CSS, все иконки на сайтах представляли собой изображения. Но так как файлы изображений много весят, разработчики стремились найти один или несколько альтернативных способов отображения маленьких иконок. Например, CSS-спрайты позволили разработчикам хранить все иконки на одном изображении, но из-за проблем с доступностью этот способ не стал популярным способом отображения иконок — и в 2012 на смену им пришли иконочные шрифты. А сейчас многие разработчики отдают предпочтение масштабируемой векторной графике — SVG (Scalable Vector Graphics).

Что такое иконочные шрифты

Иконочные шрифты — текстовые файлы, которые можно модифицировать при помощи CSS. Как следствие, масштабируются они гораздо лучше, чем растровые изображения, т.к. изменение размера не ведет к ухудшению качества изображения. Изменение цвета или добавление тени — все это сделать так же легко, как и при работе с обычным текстом. В сети можно легко найти бесплатные для использования шрифты либо можно создать свой собственный шрифт. К минусам можно отнести то, что большинство наборов со шрифтами содержат иконки, которые вы, скорее всего, не будете использовать — и они будут просто занимать место.

Но, как и у CSS-спрайтов, иконочные шрифты имеют свои недостатки — например, для того, чтобы корректно их отобразить, браузеру приходится делать дополнительные запросы на сервер, что может привести к FOIT (Flash of Invisible Text) — ситуации, когда шрифт не отображается вообще. По этой и другим причинам многие разработчики делают выбор в пользу SVG.

Что такое SVG

SVG (Scalable Vector Graphics) позволяет отображать в браузере векторную графику. Формат SVG быстро стал новым стандартом для иконок и анимации. Они быстрее загружаются, прекрасно масштабируются и более надежные в использовании, чем иконочные шрифты. Векторная графика полностью стоит из кода и весит гораздо меньше, чем изображения в форматах JPG или PNG и большинство библиотек иконочных шрифтов.

Сравнение

Настало время сравнить SVG и иконочные шрифты по нескольким параметрам.

1. Размер

Если использовать встроенный SVG, то есть прописывать SVG в CSS, то код может стать тяжелым и громоздким. К тому же встроенный SVG код не кэшируется пользовательскими браузерами, в отличие от внешних SVG файлов. Поэтому если на определенной странице сайта много разных иконок, то иконочные шрифты будут предпочтительнее встроенных SVG изображений (но при условии, что вы не используете готовую библиотеку иконочных шрифтов).

Важно понимать, что 10 оптимизированных SVG иконок, скорее всего, будут весить меньше, чем целая библиотека иконочных шрифтов. А вот если вы создадите библиотеку только с теми иконками, которые нужны вам, то такая библиотека будет выигрывать по весу.

2. Производительность

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

Встроенные SVG иконки не требуют дополнительного запроса, но и кэшироваться браузером они тоже не могут.

Можно собрать SVG файлы в отдельный внешний файл — и тогда его можно будет кэшировать.

Опять же, производительность во многом зависит от того, сколько весят ваши иконочные шрифты/SVG.

3. Гибкость

Оба формата можно настраивать с использованием CSS, но SVG дает гораздо больше возможностей, например, сделать иконки разноцветными.

Иконочным шрифтам можно прописывать CSS-стили (тень, цвет и т.д.), их можно массово изменять при помощи одного правила в CSS, их можно анимировать.

4. Поддержка браузеров

Какой бы формат вы ни выбрали, его все равно нужно будет дорабатывать для того, чтобы обеспечить поддержку старых браузеров. Т.к. иконочные шрифты существуют дольше, чем SVG, то и поддержка у них шире — их увидят все, кто использует IE 6 и более новые версии.

С другой стороны, сейчас подавляющее большинство пользователей использует современные браузеры, так что на этот пункт сильного внимания обращать не стоит. Единственный нюанс, о котором стоит помнить — IE и Edge не всегда правильно масштабируют SVG файлы.

5. Масштабируемость

И иконочные шрифты, и SVG — это векторные форматы. Поэтому их можно легко увеличивать или уменьшать без потери качества. Браузеры интерпретируют иконочные шрифты как текст, поэтому они могут сглаживаться — и при сравнении SVG изображения выглядят чуть более резкими, чем иконочные шрифты.

Вывод

До сих пор в среде разработчиков нет единого мнения о том, что лучше использовать — иконочные шрифты или SVG. Суть в том, что зачастую многое зависит от поставленных задач и проекта в целом.

Но все же сейчас чаще всего используют SVG — у этого языка разметки лучше масштабируемость, UX (пользовательский опыт), и он поддерживается всеми основными браузерами. Существует мнение, что один из трендов 2018 года — это уход от иконочных шрифтов к иконкам в формате SVG.

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

А что вы используете в разработке, SVG или иконочные шрифты?

Иконки в формате шрифта для сайта

В этой статье мы рассмотрим, что такое иконки в формате шрифта, и какие они имеют преимущества и недостатки. Кроме этого, разберём основные принципы работы с иконками в формате шрифта и некоторые варианты их использования.

Что такое иконки в формате шрифта

Иконки в формате шрифта представляет собой просто шрифт. Но в отличие от обычных шрифтов они содержат не буквы и цифры, а значки (иконки).

Иконки в формате шрифта имеют следующие преимущества перед иконками в виде растровых изображений:

  • Возможность применять к ним любые CSS стили, которые можно применять к обычному тексту;
  • Хорошо масштабируются, т.к. иконки в формате шрифта являются векторными изображениями. Т.е. Вы можете увеличивать или уменьшать их размеры без потери качества;
  • Меньшее количество HTTP-запросов, которое может потребоваться для их загрузки по сравнению с количеством HTTP-запросов, которых может потребоваться для загрузки иконок в виде растровых изображений;
  • Более быстрая загрузка иконок, т.к. они имеют небольшой размер;
  • Наборы иконок в формате шрифта поддерживаются всеми браузерами, из-за того что они поставляются в различных форматах: eot, ttf, woff, svg и др. Т.е. если браузер не имеет поддержку одного формата, то он использует другой;
  • Большинство наборов иконок (Font Awesome, Glyphicons и др.) содержат в своём наборе иконки SVG (в формате шрифта), которые являются очень чёткими и отлично масштабируются.

Значки в формате шрифта обычно находят широкое применение при разработке дизайна сайта, т.е. используются для оформления различных его элементов или блоков.

Но иконки в формате шрифта кроме преимуществ, имеют ещё и следующие недостатки:

  • их затруднительно использовать для иконок, которые являются сложными изображениями, а не просто значками;
  • цвет иконки в формате шрифта ограничен одним цветом.

Использование иконок в формате шрифта

Иконки в формате шрифта невероятно просты в использовании.

Рассмотрим основные действия для работы с пакетами иконок в формате шрифта:

  1. Скачать с сайта пакет иконок в формате шрифта, который вы хотите использовать на своём сайте. Рассмотрим наши действия на примере Font Awesome.

  2. Скопировать и подключить файл CSS поставляемый вместе с пакетом иконок в формате шрифта. Если открыть данный файл, то Вы увидете, что он содержит инструкцию

    @font-face, которая подгружает шрифты и выполняет их настройку. Кроме этого, этот файл также может содержать правила CSS, с помощью которых упрощается работа с этим набором шрифтов.

    
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    
  3. Скопировать каталог «fonts», содержащий шрифты, в Вашу директорию на сайте. Если уже есть такая директория, то Вы можете просто скопировать содержимое каталога «fonts» в эту директорию.
  4. В зависимости от пакета иконок, который Вы используете, значки обычно вставляются одним из двух способов:
  • с помощью указания соответствующих классов в атрибуте class элемента i или span.
    
    <!-- Отображение иконки в Font Awesome -->
    <span></span>
    <i></i>
    
  • с помощью указания номера значка в атрибуте data:
    
    <!--Шрифт Elegant Icon Font -->
    <!--Отображение иконки с помощью указания номера значка в атрибуте data -->
    <span data-icon="&#x3f;"></span>
    
  • При необходимости можно настроить отображения иконки с помощью стилей CSS.
    
    <!-- Например, увеличить размер иконки в 4 раза с помощью класса Font Awesome fa-4x -->
    <i></i>
    <!-- Например, с помощью указания собственных правил CSS -->
    <!-- Установим размер иконки и её цвет -->
    <i></i>
    

    Но стили для иконок обычно не задают с помощью атрибута style, для этого используют классы:

    
    CSS:
    .large-green {
      font-size: 50px;
      color: green;
    }
    HTML:
    <i></i>
    
  • Примеры использования иконок в формате шрифта

    Рассмотрим некоторые примеры, где можно использовать иконки в формате шрифта.

    • Иконки можно использовать в кнопках:

      
      <button><i></i> Кнопка1</button>
      <button><i></i> Кнопка2</button>
      <button><i></i> Кнопка3</button>
      <button><i></i> Кнопка4</button>
      

      Кнопка1 Кнопка2 Кнопка3 Кнопка4

    • Иконки можно использовать в меню:

    • Иконки можно использовать в различных информационных виджетах:

    • Иконки можно использовать для создания социальных кнопок:

    • Иконки можно использовать в кнопках, с помощью которых осуществляется работа с записями в таблице:

    Популярные пакеты иконок в формате шрифта

    Рассмотрим наиболее популярные пакеты иконок в формате шрифта.

    Glyphicons

    Font Awesome

    Foundation Icon Fonts

    Brandico

    Elegant Icon Font

    Themify Icons

    Ionicons

    Octicons

    Open Iconic

    Typicons

    Stroke 7

    Ligature symbols

    Различные коллекции иконок


    Десять причин нашего перехода с иконочного шрифта на SVG

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

    1. Разделение функций

    До недавнего времени на lonelyplanet.com использовался подключённый шрифт, в котором все иконки были упакованы в один файл вместе с ним, причём глифы хранились в области частного использования Unicode. Такое решение нас полностью устраивало, поскольку для загрузки всех иконок требовался всего один HTTP-запрос, но, в то же время, данное решение ограничивало возможность управления приоритетом загрузки ресурсов.

    У нас есть небольшая подгруппа иконок, отображение которых является критически важным для обеспечения качественного пользовательского опыта. Этот критерий не касается остальной части шрифта и иконок, и для нас крайне желательна загрузка второстепенных ресурсов после загрузки основного содержимого страницы. Однако, при предыдущем подходе к хранению иконок это было невозможно.

    Отделение важных иконок от остальной части шрифта дало нам возможность более тонкого управления загрузкой ресурсов страницы.

    Контраргумент

    Объединять подключённый шрифт и иконочный шрифт вовсе необязательно, их можно хранить отдельно. Наверное, мы бы так и сделали, если бы решили остановиться на использовании иконочного шрифта.

    2. Некоторые устройства не поддерживают области частного использования Unicode

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

    Я уже и не помню, на каком устройстве проводил тестирование, когда обнаружил, что одна из наших иконок с «птичкой» была заменена иконкой цветной печати. Страница казалась мне дилетантской и «сломанной», что, без сомнения, послужило дополнительным стимулом для перехода на SVG.

    3. Чёрные квадратики и крестики в Opera Mini

    Добиться правильной поддержки и распознавания начертания шрифта никогда не было просто. Уверен, что вы все видели эту иллюстрацию отрисовки шрифта Awesome в Opera Mini:

    Я не буду вдаваться в подробности, так как проблемы поддержки Opera Mini и многих других платформ уже хорошо описаны в этой статье от @kaelig.

    Если абстрагироваться от самой Opera Mini, я думаю, что здесь особенно важен тот момент, что мы определили то самое слепое пятно, которое мы в принципе не в состоянии контролировать. К сожалению, мы физически не можем провести тестирование на всех устройствах без исключений, потому нам следует отдавать предпочтение приёмам, при которых корректное отображение наиболее вероятно.

    На данный момент, мы получаем не очень большую долю трафика с Opera Mini. Однако, важно помнить, что мы — компания, связанная с сферой туризма, и мы обязаны предоставляет свои услуги в любых условиях, при любом качестве подключения к сети. Так что нам всегда следует стремится делать наш сервис более доступным. Наибольшую уверенность в том, что пользователь увидит адекватное отображение страницы, нам предоставляют форматы SVG и PNG.

    4. В последнее время поддержка иконочных шрифтов в Chrome отвратительна

    В Chrome Canary и Beta недавно появилась отвратительная ошибка при отображении шрифтов. Если вы её пока не встречали, вкратце — после определённого периода неактивности страницы шрифт сбрасывается и заменяется на системный.

    Когда происходит сброс шрифта, ваш текст отображается в Georgia, и, хоть это и не критически важный момент, он все же действует на нервы. А вот когда тот самый шрифт отвечает и за отображение иконок, страница внезапно заполняется мусором из чёрных квадратиков, и пользоваться нормально ей становится невозможно.

    Эта ошибка проявилась как раз когда мы осуществляли переход на SVG. В результате, когда нам начали поступать первые отчёты об обнаружении этой ошибки на нашем сайте, мы уже перешли на новую систему и вздохнули с облегчением.

    Контраргумент

    Эта ошибка так и не добралась до официальной сборки Chrome.

    5. Чётче иконки в Firefox

    Мы обнаружили, что в Firefox наш шрифт отображается чуть жирнее, чем в других браузерах. Когда дело касается текста, в этом нет ничего страшного (хотя, и хорошего тоже мало), а вот из-за жирных иконок вся страница выглядит неухоженной и аляповатой. Используя SVG нам удалось добиться нормального отображения иконок во всех браузерах.

    6. Не всегда есть возможность использовать генерируемый контент

    Если вы хотите использовать шрифтовые иконки в CSS, вам придётся прописывать их, используя свойство content для генерируемого контента. Иногда это может быть затруднительным, потому что вы уже используете псевдоэлементы :before и :after, да и не все элементы поддерживают генерируемое содержимое.

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

    С SVG эта проблема исчезает, так как вы не ограничены генерируемым контентом и можете применять иконки в этом формате как фоновое изображение для любого элемента.

    7. Проще позиционирование

    Возможно, это результат того, как мы создали и упорядочили глифы, однако, нам ни разу не удалось поставить иконки в нужную позицию с перового раза. Как, к слову, и добиться простыми путями одинакового отображения во всех браузерах. Мы прибегали к хакам на основе высоты строки и абсолютному/относительному позиционированию, чтобы они отображались так, как надо, и нам было трудно найти абстрактное решение, которое работало бы всегда.

    Используя SVG, нам стало гораздо легче их позиционировать. А для единого кроссбраузерного отображения мы используем background-size: cover, и просто делаем размеры элемента резиновыми.

    8. Многоцветные иконки

    Как хорошо известно, шрифтовые иконки ограничиваются только одним цветом. В отличие от SVG, который поддерживает огромное количество цветов, а также градиентов и других графических элементов.

    Нам всегда была необходима поддержка многоцветных иконок для карт. Ранее, кроме иконочного шрифта мы использовали для этой цели дополнительный спрайт в формате PNG. В результате перехода на SVG мы смогли избавиться от лишнего спрайта, который для пользователя являлся дополнительным запросом, а для нас — дополнительным объектом, нуждающимся в поддержке.

    Контраргумент

    Многоцветный иконочный шрифт можно получить посредством наложения иконок.

    Тем не менее, сделать это качественно та еще задачка: если правильное кросс-браузерное позиционирование одного глифа — это довольно непростой фокус, то с двумя всё становится ещё сложнее.

    9. SVG позволяет использовать иконки с анимацией

    Мы пока не воспользовались этим свойством, но, вполне возможно, что мы ещё рассмотрим такую возможность, раз уж она у нас теперь есть.

    10. Нам не давала покоя мысль, что мы используем хак

    Применение шрифта для отображения иконок нам всегда казалось хаком. Бесспорно, он великолепен, однако суть всё же состоит в маскировании объекта одного типа под какой-то другой.

    Как насчёт преимуществ использования шрифта?

    Использование иконочных шрифтов всё же имеет некоторые неоспоримые преимущества перед SVG и нам пришлось тщательно взвесить все за и против, перед принятием окончательного решения по переходу на новый формат. Наиболее существенными преимуществами являются неплохая кроссбраузерная поддержка и большая гибкость в изменение цвета.

    Стоит признать что нам было бы намного сложнее справиться с этими проблемами без огромной работы, проделанной командой Filament Group на Grunticon.

    Вариативность цвета

    Огромным преимуществом иконочного шрифта является его гибкость. У него нет ограничений в количестве вариаций цвета, его можно легко менять в зависимости от текущего состояния (:hover, :focus, .is-active и др.). Это редкая роскошь, которая очень способствует ускорению разработки. И это одна из причин того, почему мы так долго откладывали переход на SVG.

    Наше решение

    Для обеспечения схожей функциональности есть несколько решений, хотя все они пока имеют свои определенные ограничения. Мы наконец нашли собственную технику, которая нас вполне устраивает, и которая, в тоже время, находится на границе гибкости и ресурсоемкости.

    В Grunticon каждая иконка объявляется отдельно, таким образом избегается использование спрайтов. Мы последовали их примеру, но, хотя мы и использовали для каждой иконки один CSS-селектор, все они были представлены в шести цветах, как показано здесь.

    Так как мы всего лишь несколько раз дублировали одну и ту же иконку в одном и том же файле, его размер сжался до размера одной иконки (плюс около 50 байтов на GZIP-указатели). Это значит, что мы можем создать практически любое количество вариаций цвета почти без дополнительных затрат со стороны ресурсов. Вот пример работы этого приёма на jsFiddle.

    Это решение дало нам ту гибкость, которую мы уже считали утраченной. Мы также получили дополнительное преимущество в виде более корректного отображения цветовой палитры, которого мы постепенно лишились при использовании иконочного шрифта.

    С помощью этого приёма можно также без усилий применять к иконкам изменения, привязанные к состоянию, изменяя позиционирование фона.

    Нужно отметить, что в будущем мы, возможно, сможем полностью отказаться от спрайтов и использовать идентификаторы фрагментов в SVG для изменения цвета.

    Поддержка браузеров

    Иконочный шрифт работает во всех браузерах вплоть до IE8, в отличие от SVG. Для нашего варианта реализации нам также нужна поддержка background-size, которая является почти такой же, как и для SVG.

    Наше решение

    У Grunticon реализован креативный подход к старым версиям браузеров. Он создаёт PNG-версии SVG-файлов, и передаёт их старым браузерам в зависимости от того, поддерживают они SVG, или нет.

    В связи с отсутствием поддержки background-size, мы решили для старых версий браузеров использовать только часть иконок (только очень важные, такие как логотип). Мы могли бы обойтись без этого CSS-свойства, с помощью изменения размеров всех исходных SVG-файлов, однако, поскольку многие иконки используются с разными вариантами размера, мы решили использовать только иконки первостепенной важности с одинаковым размером в спрайте.

    Мы также пробовали использовать этот полифил background-size, однако вскоре отказались от него. Я бы крайне не советовал его использовать, если вам нужно изменить размер больше, чем для одного-двух изображений. Обнаружилось, что его применение для более чем двух изображений приводит к постоянным сбоям в IE8.

    Стоило ли оно того?

    Результаты использования обоих приёмов независимы от разрешения, масштабируемы и довольно легки по объёму, так что с точки зрения пользователя оба являются хорошими. Взвесив все за и против мы решили, что SVG дает нам больше уверенности в том, как наше приложение будет выглядеть для каждого пользователя, и этот дополнительный элемент контроля сыграл решающую роль.

    Мы используем SVG на Lonely Planet с ноября 2013 года, и пока никаких проблем по разработке в этой части не возникало.

    Page not found (404)

    Toggle navigation
    • Packs
      • Значок пакеты недавно Загрузил
      • Самых популярных значок пакеты
      • Эксклюзивные наборы значков
    • категории
      • Сельское хозяйство Иконки
      • Животные Иконки
      • Аватар и смайлики Иконки
      • Красота и мода Иконки
      • Бизнес и финансы Иконки
      • Мультфильм Иконки
      • Кино, телевидение и фильмы Иконки
      • Одежда и аксессуары Иконки
      • Преступление и безопасность Иконки
      • Культура, религия и фестивали Иконки
      • Дизайн и разработка Иконки
      • Экология, окружающая среда и природа Иконки
      • Электронная торговля и покупки Иконки
      • Электронные устройства и оборудование Иконки
      • Файлы и папки Иконки
      • Флаги и карты Иконки
      • Дизайн и разработка Иконки
      • Экология, окружающая среда и природа Иконки
      • Gym и Fitness Иконки
      • Здравоохранение и медицина Иконки
      • Промышленность и инфраструктура Иконки
      • Инфографика Иконки
      • Дети Иконки
      • люблю Иконки
      • Разное Иконки
      • Музыка и мультимедиа Иконки
      • Сеть и связь Иконки
      • Недвижимость и строительство Иконки
      • Школа и образование Иконки
      • Наука и технологии Иконки
      • SEO и Web Иконки
      • Sign и Symbol Иконки
      • Социальные медиа и логотипы Иконки
      • Спорт и игры Иконки
      • Инструменты, строительство и оборудование Иконки
      • Транспорт и транспортные средства Иконки
      • Путешествия, отели и каникулы Иконки
      • Пользовательский интерфейс и жесты Иконки
      • Погода и сезоны Иконки
    • стили значков
      • 3D Иконки
      • Badge Иконки
      • Filled outline Иконки
      • Flat Иконки
      • Glyph Иконки
      • Handdrawn Иконки
      • Long shadow Иконки
      • Outline Иконки
      • Photorealistic Иконки
    • Популярные поиски
      • Instagram Иконки
      • Vk Иконки
      • телефон Иконки
      • Папки Иконки
      • деньги Иконки
      • Социальные Иконки
      • Facebook Иконки
      • Telegram Иконки
      • Viber Иконки
      • корзина Иконки
      • Whatsapp Иконки
      • стрелка Иконки
      • Youtube Иконки
      • дом Иконки
      • Phone Иконки
      • люди Иконки
      • почта Иконки
      • папки Иконки
      • человек Иконки
      • доставка Иконки
      • галочка Иконки
      • папка Иконки
      • музыка Иконки
      • Mail Иконки
      • компьютер Иконки
      • вк Иконки
      • Steam Иконки
      • Instagram Иконки
      • сайт Иконки
      • фото Иконки
    • Log in
    • Register
    404 Icon by Laura Reen

    Page not found (404)

    Toggle navigation
    • Packs
      • Значок пакеты недавно Загрузил
      • Самых популярных значок пакеты
      • Эксклюзивные наборы значков
    • категории
      • Сельское хозяйство Иконки
      • Животные Иконки
      • Аватар и смайлики Иконки
      • Красота и мода Иконки
      • Бизнес и финансы Иконки
      • Мультфильм Иконки
      • Кино, телевидение и фильмы Иконки
      • Одежда и аксессуары Иконки
      • Преступление и безопасность Иконки
      • Культура, религия и фестивали Иконки
      • Дизайн и разработка Иконки
      • Экология, окружающая среда и природа Иконки
      • Электронная торговля и покупки Иконки
      • Электронные устройства и оборудование Иконки
      • Файлы и папки Иконки
      • Флаги и карты Иконки
      • Дизайн и разработка Иконки
      • Экология, окружающая среда и природа Иконки
      • Gym и Fitness Иконки
      • Здравоохранение и медицина Иконки
      • Промышленность и инфраструктура Иконки
      • Инфографика Иконки
      • Дети Иконки
      • люблю Иконки
      • Разное Иконки
      • Музыка и мультимедиа Иконки
      • Сеть и связь Иконки
      • Недвижимость и строительство Иконки
      • Школа и образование Иконки
      • Наука и технологии Иконки
      • SEO и Web Иконки
      • Sign и Symbol Иконки
      • Социальные медиа и логотипы Иконки
      • Спорт и игры Иконки
      • Инструменты, строительство и оборудование Иконки
      • Транспорт и транспортные средства Иконки
      • Путешествия, отели и каникулы Иконки
      • Пользовательский интерфейс и жесты Иконки
      • Погода и сезоны Иконки
    • стили значков
      • 3D Иконки
      • Badge Иконки
      • Filled outline Иконки
      • Flat Иконки
      • Glyph Иконки
      • Handdrawn Иконки
      • Long shadow Иконки
      • Outline Иконки
      • Photorealistic Иконки
    • Популярные поиски
      • Instagram Иконки
      • Vk Иконки
      • телефон Иконки
      • Папки Иконки
      • деньги Иконки
      • Социальные Иконки
      • Facebook Иконки
      • Telegram Иконки
      • Viber Иконки
      • корзина Иконки
      • Whatsapp Иконки
      • стрелка Иконки
      • Youtube Иконки
      • дом Иконки
      • Phone Иконки
      • люди Иконки
      • почта Иконки
      • папки Иконки
      • человек Иконки
      • доставка Иконки
      • галочка Иконки
      • папка Иконки
      • музыка Иконки
      • Mail Иконки
      • компьютер Иконки
      • вк Иконки
      • Steam Иконки
      • Instagram Иконки
      • сайт Иконки
      • фото Иконки
    • Log in
    • Register
    404 Icon by Laura Reen

    Как собрать шрифт с иконками

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

    UPD. Появилась более новая версия сборки

    Зачем это делать, есть же фонтелло

    Есть много сервисов, которые собирают шрифт из загруженных свг-файлов. Зачем придумывать что-то своё?

    • Чтобы случайно не сломать шрифт. Если забыть иконку, которую уже выдавал и не загрузить в фонтеллу, то она не попадет в новый шрифт и где-то в интерфейсе пропадет иконка.
    • Подойдет, если дизайнеров несколько. Если дизайнеров в команде несколько, то нужна синхронизация между ними. Было бы круто, если бы каждый мог добавлять в шрифт иконки и не сломать чужой результат.
    • Легко встраивается в ваш CI-процесс.
    • Не всех устраивает внешний сервис. Внешний сервис может быть недоступен, он может внезапно обновиться, стать платным, и вообще не все готовы отдавать наружу свои иконки.
    • Разработчику сразу формируется и less-файл. Обмениваться кодами символов неудобно, они генерируются автоматически и могут измениться, использовать css-класс надежно, он не поменяется.

    Вариант 1. Собираем и отдаём шрифт

    Я выложил все необходимые файлы в репозиторий icon-font-public, скачайте его и распакуйте куда-нибудь.
    Скачать: https://github.com/mikeozornin/icon-font-public/archive/master.zip

    Шаг 1. Настраиваем среду

    Все эти заклинания надо произнести один раз, дальше не понадобятся

    1) Установить brew. Brew — это такой менеджер пакетов, который легко позволяет ставить программы и библиотеки. Выполнить в терминале команду:

    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    2) С помощью brew установить шрифтообработчики:

    brew install ttfautohint fontforge --with-python

    3) Установить node.js, скачать тут https://nodejs.org/en/ current-версию.

    4) Установить SketchTool
    При установленном Sketch выполнить в терминале команду:

    /Applications/Sketch.app/Contents/Resources/sketchtool/install.sh

    5) Установить grunt

    npm install -g grunt-cli

    Шаг 2. Сборка файла шрифта

    Для сборки шрифт нужно произнести в терминале заклинание:

    ./build.sh

    Если в первый раз не сработает, сделайте скрипт выполняемым:

    chmod +x build.sh

    В итоге при добавлении иконки нужно будет сделать:

    1. Нарисовать иконку.
    2. Собрать шрифт: ./build.sh
    3. Отдать файл шрифта и less-файл разработчику

    Что все это было?

    Всё, что описано выше работает так:

    1. С помощью SketchTool всё, что может быть экспортировано, экспортируется из скетча в СВГ-файлы.
    2. СВГ-файлы, полученные на шаге выше собираются в шрифт. Для этого запускается сборщик шрифта, который все СВГ-файлы собирает в шрифт, конвертирует его в нужный формат и формирует хтмл-страницу с превью.

    Вариант 2. Собираем и отдаём шрифт npm-пакетом

    Это ещё что такое?

    Фронтенд-разработчики подключают библиотеки через npm-пакеты. Это привычная и удобная для них среда, кроме этого, npm-пакет сделает передачу шрифта удобней.

    Шаг 1. Настраиваем среду

    Нужно настроить среду как в первом варианте, и дополнительно настроить локальный npm-репозиторий. Спросите вашего фронтендера как это сделать у вас в команде. Попросите его исправить файл package.json.

    Шаг 2. Сборка файла шрифта

    1. Нарисовать иконку.
    2. Собрать шрифт: ./build.sh
    3. Изменить версию пакета в файле package.json
    4. Выполнить команду grunt publish
    5. Передать разработчику шифровку «Выпустил пакет версии xxx».

    Вариант 3. Собираем и отдаём шрифт нугет-пакетом

    К сожалению про нугет ничего не знаю, но если кто-то соберет рабочий вариант, добавлю.

    На что обратить внимание при рисовании иконок

    При экспорте иконок надо не забыть перевести все в кривые. Чего не должно быть:

    • Радиусов скруглений
    • Покрашенным рамок
    • Текстовых надписей

    Если это будет, то иконка может выглядеть в шрифте плохо, даже если в СВГ-файле было всё ок.

    Если что-то не работает

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

    Иконочный шрифт FontAwesome: использование в Фотошопе

    Иконочный шрифт Font Awesome — не единственный подобный шрифт, но весьма добротный по набору иконок в нем на все случаи жизни)

    Иконочные шрифты сейчас удобно использовать в веб-дизайне, в качестве картинок для сайта, потому что иконку можно, как текст, масштабировать до любого размера без потери качества, а также легко задать или поменять цвет на более подходящий, да и набор изображений вполне удовлетворит потребностям веб-дизайнера)

     

    Но иконочный шрифт можно использовать не только на сайтах, его можно установить и на компьютер, например на ОС Windows) Что мне недавно и потребовалось.

    Моя задача состояла в том, чтобы выяснить, можно ли использовать иконочный шрифт для Photoshop, чтобы пользоваться готовыми иконками, увеличивая их до необходимого размера и делая из них полноценные изображения.

    В общем, задача выполнимая, но потребовалось разобраться.

    Как установить Font Awesome на компьютер

    Для начала зайдем на официальный сайт шрифта http://fontawesome.io/cheatsheet/ и скачаем архив с файлами шрифта, шрифт бесплатный, скачивается без проблем. Находим архив для загрузки, скачиваем, открываем архив и устанавливаем файлы с расширением .otf

    Шрифт FontAwesome в данный момент подразделили на Solid (жирный) и regular (обычный).

    Устанавливаем все предложенные шрифты, нажимая поочередно на файлы .otf — откроется установка шрифта на windows, нажмем на кнопочку «Установить» в левом верхнем углу — шрифт установится на компьютер. (Рис. ниже)

     

     

    Как использовать шрифт Font Awesome в Photoshop?

    Откроем фотошоп, затем откроем или создадим новое окно-изображение. Выберем инструмент «Текст», выберем в раскрывающемся списке шрифтов уже установленный FontAwesome. Затем нам снова потребуется перейти на официальный сайт шрифта, на ту самую страницу где представлены все иконки шрифта http://fontawesome.io/cheatsheet.

    Там мы выбираем любую иконку.

    Теперь внимание: обратим внимание на раздел SOLID или REGULAR. Если иконку выбрали из раздела Solid, то копируем саму иконку (выделяем саму иконку, изображение, не название и не юникод, и копируем в буфер).

    Далее возвращаемся в фотошоп -> выбираем инструмент «Текст», ставим курсор в нужное место — > в окне шрифтов выбираем один из имеющихся у вас шрифов FontAwesome (free, brand).

    И снова ВНИМАНИЕ: если иконку копировали на сайте из раздела Solid, то рядом с названием шрифта устанавливаем жирность вместо regular -> solid ! Это важно, иначе у вас отобразится просто прямоугольник. Если копировали значок из раздела Regular (там прозрачные контурные иконки), то проследим чтобы жирность шрифта была так же Regular. 

    После этих предварительных действий на месте курсора вставляем иконку через «вставка»: меню-edit (редактирование) -paste (вставка) или правой кнопкой мыши выводим контекстное меню и «Встивить» (paste), либо просто используем сочетание клавиш CTRL+V (вставка скопированного объекта)

    Как видим, на месте курсора отобразится нужная иконка. Ее можно увеличить, перекрасить, превратить в картинку. Так же можно попробовать использовать и другие иконочные шрифты. Ну, например, готовый футбольный мячик))

    Читайте также в моём блоге:

    Как скачать видео с сайта?

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

    • < Назад
    • Вперёд >

    Что такое иконочные шрифты? | Pluralsight

    Иконочные шрифты — это шрифты, содержащие символы и глифы вместо букв или цифр. Они популярны среди веб-дизайнеров, поскольку вы можете стилизовать их с помощью CSS так же, как и обычный текст. Кроме того, поскольку они векторные, их легко масштабировать. Они маленькие, поэтому загружаются быстро и (бонус!) Поддерживаются во всех браузерах. Обычно шрифты значков имеют только один цвет, и их заставляют следовать сетке, например, 16 на 16 пикселей или 32 x 32. Любой эффект CSS3 неплохо смотрится на дисплее Retina.Иконочными шрифтами очень легко манипулировать с помощью CSS3. Иконочные шрифты — довольно простой способ решения проблемы адаптивного дизайна. Очень просто настроить отображение текста разного размера для разных размеров области просмотра, но гораздо сложнее изменить размер изображений. Также просто изменить их цвет или добавить тень к форме значка шрифта. Есть несколько недостатков в использовании шрифтов со значками. Во-первых, хотя вы можете изменить их цвет, вы не можете использовать более одного цвета. Прямо сейчас популярны простые, чистые, монохромные дизайны, так что это не большая проблема, но об этом все же следует знать.Другая проблема — доступность. Хотя сделать значки шрифтов доступными, поместив их в класс aria, довольно просто, об этом следует помнить. Вы можете получить иконочные шрифты из множества разных мест. Три самых популярных — Entypo, Font Awesome и IcoMoon. Вы можете использовать эти шрифты на своем сайте через объявление CSS @ font-face.

    Entypo CC BY-SA 3.0 предоставляет Entypo бесплатно, поэтому, если вы хотите использовать его, вы можете, но они ожидают, что вы включите простую атрибуцию.Entypo Suite — это пакет, который включает шрифты OpenType, TrueType и @ font-face. Entypos был создан Данилом Брюсом и Андреасом Бломбеком. Сайт Entypo имеет простой интерфейс и включает карту персонажей, которая является полным справочником, так что вы можете легко выбрать правильный значок, когда ищете его. На ваш выбор более 250 иконок. Entypo 2.0 включает в себя расширение для социальных сетей, поэтому вы можете добавлять значки социальных сетей, таких как Twitter, Facebook, Google+, Pinterest и т. Д.

    Font Awesome Font Awesome бесплатен и имеет открытый исходный код.Изначально он был разработан для работы с Bootstrap, но хорошо работает со всеми фреймворками. Чтобы использовать значки Font Awesome, вам нужно использовать @fontface и поместить их в элемент или, а затем назначить им классы. В Font Awesome замечательно то, что, поскольку он полностью открыт, он пользуется большой поддержкой и постоянным обновлением. Если у вас есть вопросы, вы можете просто перейти в раздел «Сообщество» на их сайте и найти ответы на них. Есть множество разных способов разместить значки Font Awesome на своем сайте.Они показывают фрагменты кода, чтобы помочь вам понять, как добавить значки Font Awesome на ваш сайт. Font Awesome также предоставляет множество отличных советов, которые помогут вам начать работу с их размещением на вашем сайте.

    IcoMoon IcoMoon предлагает как бесплатные, так и платные шрифты. Бесплатные шрифты имеют открытый исходный код, а премиум-шрифты платные. У IcoMoon также есть веб-приложение, которое позволяет вам создавать собственный шрифт, выбирая только те значки, которые вам нужны. Вы даже можете добавить в это приложение свои собственные значки, которые будут включены в шрифт, созданный через их веб-приложение.После того, как вы выбрали значки, IcoMoon предоставит вам HTML-файл, в котором показано, как именно использовать значок шрифта! Entypo также включен в качестве одного из шрифтов на выбор в IcoMoon. IcoMoon — фантастический инструмент, позволяющий включать на свой сайт только те значки, которые вы хотите. Если вы добавите меньше значков, ваша страница будет загружаться быстрее.

    50 лучших бесплатных шрифтов с иконками для дизайна пользовательского интерфейса

    Хотя шрифты Icon очень популярны, у них есть свои подводные камни. Ян Фезер рассказал о причинах перехода с иконочного шрифта на SVG, а CSS Tricks изложил некоторые соображения при выборе между иконочной системой шрифтов или SVG.Оба явно отдают предпочтение SVG. В качестве контраргумента Pictonic сказал, что шрифты иконок на 10% быстрее, чем SVG. Это как раз то, что вам следует учесть, прежде чем использовать шрифты со значками.

    Чтобы ваши значки всегда загружались правильно и имели надежные резервные копии для браузеров, не поддерживающих @fontface , вам следует ознакомиться с рекомендациями, изложенными в Filament Group , Bulletproof Accessible Icon Fonts.

    Вам также могут понравиться: 50 лучших бесплатных наборов иконок для веб-дизайнеров.

    18 000+ шрифтов с засечками, без засечек, скриптовых, декоративных и монохромных шрифтов

    Plus, мокапы, действия, кисти, графические шаблоны, шаблоны логотипов и многое другое!

    Если вы разрабатываете новый интерфейс или хотите продемонстрировать возможности своего продукта, обратите внимание на этот замечательный (и бесплатный) значок шрифта. Эти значки с открытым исходным кодом обозначают действия и элементы; от стрелок и вложений до цветовых палитр. Это полный пакет с более чем 480 значками!

    Модный шрифт для иконок с тонкими линиями

    (100 иконок, Envato Elements)

    Нет ничего лучше минимализма, чтобы подчеркнуть качество вашего продукта, и этот набор иконок — отличный выбор для вашего следующего проекта.Они векторные и полностью редактируются в Adobe Illustrator. От значков частоты до красивых значков переключения контуров — у вас есть все, что вам нужно!

    Перестаньте беспокоиться о том, чтобы ваши значки работали с форматированием текста. Этот набор значков с открытым исходным кодом включает более 230 практических и технических значков в различных форматах; из SVG в WOFF. Вы можете легко изменить их размер в соответствии с вашими потребностями с помощью CSS, и они отлично читаются даже при 8 пикселях.

    Шрифт Pictypo Icon от Typogama

    (Envato Elements)

    Pictypo предлагает забавные и привлекательные значки, созданные с использованием шрифтов дингбата.Скругленный стиль добавляет дружелюбия, и вам будет с чем поработать. Pictypo предлагает все, что вам нужно, от значков погоды до символов офиса. Линии жирные, поэтому они хорошо смотрятся и на больших дисплеях.

    Ionicons — это полноценный набор иконок для Ionic framework. Вы получите множество значков приложений (уведомления, стрелки, еда и т. Д.), А также значки с логотипами известных брендов (например, Pinterest). В зависимости от ваших потребностей вы можете загрузить контурные, заполненные и / или четкие изображения значков в виде файлов SVG и веб-шрифтов.

    Набор значков каркаса Icoframe

    (60 значков, элементы Envato)

    Сделайте свой следующий проект более динамичным и интересным с помощью Icoframe — красивых и современных каркасных иконок. Вы получите 60 минималистичных каркасных иконок; от символов для страниц входа до значков сетки, шкалы времени и типографики. Дизайн очень интуитивно понятный, и вы можете легко настроить их в Adobe Illustrator.

    Font Awesome — массивный и очень популярный набор иконок.Они предлагают более 1600 бесплатных иконок, каждая из которых была тщательно разработана, чтобы продемонстрировать удобство и простоту использования. В галерее FA вы найдете все: от логотипов AWS и других брендов до значков бизнеса и стиля жизни.

    Каркасные шрифты Wirebet

    (Envato Elements) Шрифты

    Wirebet — отличный выбор, если вы хотите оптимизировать рабочий процесс и интегрировать привлекательные значки в свои материалы, не загружая свой дизайн-пакет. Вы получите множество технических значков; от символов для страниц портфолио до стрелок и значков устройств.Wirebet идеально подходит для вайрфреймов!

    Добавьте современные значки линий в свои материалы в одну строку кода с помощью Line Awesome. Он улучшает предложение Font Awesome и позволяет добавлять всевозможные значки (от специальных возможностей и создания до стрелок и значков брендов) на ваш веб-сайт (через CDN), прототипы Figma и многое другое.

    Коллекция Crafty Font Collection

    (24 шрифта, Envato Elements)

    Crafty Collection предлагает 24 привлекательных и забавных шрифта, которые вы можете использовать, чтобы сделать ваш следующий дизайн намного более захватывающим.От звезд и полос до грубых контуров и брызг — The Crafty Collection предлагает сочетания шрифтов, которые хорошо сочетаются друг с другом, поэтому ваши дизайны всегда будут выглядеть связно и интересно.

    Dashicons — это иконочный шрифт для WordPress. Если вы хотите подражать фирменному стилю WP в других проектах, вам это понравится. Он очень техничный по стилю, но он передает суть и прост в использовании. От логотипов брендов до TinyMCE — разгуляйтесь!

    Шрифт значка векторной линии

    (130 значков, элементы Envato)

    Этот набор линейных значков поставляется в двух форматах: легко редактируемые векторные изображения, которые можно настроить в Adobe Illustrator, и веб-шрифт с функцией plug-and-play.Вы получите 130 минималистичных тонких иконок для работы; от значков сообщений до символов камеры и микрофона, как в Microsoft Windows 10.

    Remix Icon — это библиотека значков с открытым исходным кодом, содержащая более 2200 значков. Все значки бесплатны как для личного, так и для коммерческого использования. Вы увидите множество значков; от тонких контурных значков до закрашенных символов для дополнительного акцента. Получите их как PNG, SVG или код.

    Плоский шрифт Line Icon

    (26 иконок, Envato Elements)

    Если вы ищете другой набор значков, вам понравится эта коллекция шрифтов для значков! Он идеально вписывается в современный дизайн инфографики, но предлагает креативную визуализацию типичных значков, которые выделят ваш бренд.От аналитики до поддержки клиентов — есть что любить!

    Вдохновленные Apple iOS, иконки Themify предлагают более 300 красивых и минималистичных иконок. От стрелок до значков приложений вы получите все необходимое в виде шрифта значка для упрощения интеграции рабочего процесса (включая SVG) или плагина для WordPress. Иконки Themify идеально подходят для современного дизайна пользовательского интерфейса!

    Если вам не нужны значки линий садового разнообразия, обратите внимание на Dripicons. Этот бесплатный шрифт с иконками невероятно прост в использовании, но самое главное, они красивы! Вы получите набор универсальных значков, выделенных жирным шрифтом; от стрел и техники до образования и музыки.

    Если вам нравится эстетика GitHub, вам понравятся их Octicons. Эти значки доступны в двух размерах (16 пикселей и 24 пикселей), и они также включают некоторые специальные значки, такие как запросы на вытягивание. Вы можете переключаться между контурными и заполненными значками. Они отлично работают с разными языками программирования.

    Начните с нескольких строк кода и значков Foundation. Эта коллекция состоит из разных наборов; от общих значков до значков специальных возможностей, так что найдется что-то для каждого проекта.Значки Foundation работают как веб-шрифт, поэтому вам не придется прыгать через обручи.

    Devicons — это иконочный шрифт, созданный специально для разработчиков и самых разных проектов. Шрифт содержит 85 значков, в основном логотипы брендов для таких сервисов, как Dropbox, и платформ программирования, таких как PostgreSQL. Devicons можно интегрировать, добавив одну строку кода в HTML-заголовок проекта.

    Красивый, элегантный и привлекательный — этот значок шрифта содержит более 300 различных значков.Их легко интегрировать и использовать, особенно если в прошлом вы использовали Elegant Themes или конструктор Divi. В этом наборе вы найдете все, от значков файлов до стрелок.

    Сохраняйте простоту и доступность с помощью Feather, обширной коллекции иконок с открытым исходным кодом. От стрелок и шевронов до значков пользовательского интерфейса приложений — Feather — отличное дополнение к стандартному набору инструментов для дизайна. Вы можете настроить размер, ширину обводки и цвет каждого значка, чтобы они идеально соответствовали вашему бренду.

    Простые, удобные и идеальные для самых разных проектов, Typicons — отличный выбор. Они встроены в веб-шрифт, поэтому ими легко пользоваться. Вы получите 336 иконок; от винтиков и стрелок до логотипов брендов. Вы можете выбирать между значками с заливкой или контурами.

    Обновите свой стандартный набор инструментов с бесплатными значками IcoMoon. Вы получите 490 векторных иконок, которые идеально подходят для приложений и веб-интерфейса. Эти иконки просты и минималистичны, с небольшой индивидуальностью.От иконок для дома до смайликов — в этом весь комплекс!

    Упростите свой дизайн с помощью Genericons, набора простых и минималистичных иконок для веб-дизайна и дизайна приложений. Они идеально подходят для блогов или простых веб-сайтов, где вы хотите сосредоточиться на обмене сообщениями. Вы получите множество значков для основных функций; из карт сайта в RSS-каналы.

    Icon-Works — бесплатный и стильный иконочный шрифт — отличный выбор, если вы хотите выделить свой следующий дизайн. Вы получите множество красивых, готовых к работе с сетчаткой значков, которые можно настроить.Они масштабируемы, поэтому вам даже не нужно беспокоиться об изменении их размера.

    Иконки

    Micron гордятся своей простотой. В коллекции представлены все значки для наиболее распространенных случаев использования; от диаграмм и стрелок до значков навигации. Их легко кодировать, а размер самого файла составляет всего 5 КБ, поэтому они идеально подходят для использования в вашем портфолио проектов.

    Прямо из мастерской Pixeden, Stroke 7 представляет собой набор тонких иконок. Набор предлагает более 200 иконок, которые можно настроить с помощью CSS.Они были вдохновлены иконами начала 00-го, поэтому они не будут выделяться и отвлекать внимание от вашего основного сообщения.

    Петрас Наргела разработал набор из 80 штриховых иконок, и это бесплатно. Эти красивые иконки свежие, чистые и готовы оживить ваш дизайн. Вы можете скачать их в формате PSD, AI или в виде файлов веб-шрифтов. Если вам нужно что-то другое, вы это нашли!

    Созданный Google набор значков Material Design содержит множество значков, которые вы можете использовать в своих проектах.Вам просто нужно добавить одну строку кода на свой сайт, и все готово! Поскольку участники сообщества постоянно добавляют свои собственные значки, существует много разнообразия.

    Если ваш пользовательский интерфейс минималистичен, выбирайте значки, которые следуют тем же эстетическим подсказкам. Этот минимальный набор иконок содержит более 70 чистых и четких иконок. Векторы масштабируемы, и вы можете легко изменить цвета значков в соответствии со своим стилем. Вы можете скачать их бесплатно в различных форматах.

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

    иконок Metrize — это 300 иконок в стиле метро, ​​которые придадут импульс вашему следующему проекту. Вы можете использовать их для приложений и веб-сайтов, и все это очень просто, поскольку они также доступны в виде веб-шрифтов. От логотипов брендов до стрелок — Metrize поможет вам!

    CSSans — это красочный и динамичный шрифт CSS. Состоящие из множества красочных геометрических элементов, которые добавляют яркости вашему дизайну, CSSans — это индивидуальность! Вы получите уникальные прописные и строчные буквы, цифры и другие символы.Он бесконечно настраивается и привлекает внимание с самого начала!

    Набор значков

    MFG Labs изначально разрабатывался для внутреннего проекта, но команда не могла устоять перед тем, чтобы поделиться этим универсальным набором значков. Их легко встраивать и настраивать с помощью CSS. Вы найдете все значки, необходимые для создания правильной атмосферы для вашего следующего дизайна.

    Ligature Symbols — это иконочный шрифт с забавными и минималистичными иконками. Отдельные значки можно комбинировать для создания лигатур (например,г. объединить значки таблиц и ячеек для создания сеток), что повышает удобство использования этой коллекции. Вы найдете все, что вам нужно, так что попробуйте этот бесплатный шрифт с иконками!

    Девиконы — это дружественные, удобные для разработчиков значки, созданные для представления инструментов программирования и разработки. От Chrome и Confluence до Django и Adobe Illustrator вы найдете значок, который так долго искали. Вы можете легко скопировать и вставить их в свои проекты, используя версии шрифтов или версии SVG.

    Простые и чистые, эти мини-иконки идеально подходят для самых разных проектов, особенно более формальных по тону.Эта коллекция значков содержит 80 точно созданных значков как в формате PSD, так и в формате значков. От символов загрузки / выгрузки до значков местоположения и погоды — этот набор предлагает все, что вам нужно!

    Набор иконок Тараса Шипки «Гелий» предлагает множество иконок. Они не только бывают всех мыслимых форматов, но вы также можете использовать их в качестве шрифта значков. Вы получите 112 иконок с тонкими штриховыми линиями, которые добавляют блеск. Гелий определенно выбор эстетов!

    Набор Gonzocons, разработанный Яном Райторалом, предлагает 100 линейных иконок, которые идеально воспроизводят современные тенденции дизайна иконок.От упрощенных стрелок до жизнерадостных сердец и песочных часов — иконы Gonzocons определенно обладают индивидуальностью. Вы можете получить их как файлы SVG или как веб-шрифт для упрощения интеграции с вашим приложением / сайтом.

    Map Icons — это шрифт значков, созданный для Google Maps и Places. Вы можете легко настроить значки с помощью CSS и выбрать из более чем 175 значков. От общих значков для парикмахерских до значков для мероприятий — в этом наборе есть из чего выбрать, чтобы сделать ваш следующий проект потрясающим.

    Простой и увлекательный набор из 150 обведенных значков.Вы можете получить их в виде файлов PSD, AI, SVG или веб-шрифтов. Иконки Дарио Феррандо вдохновлены современным дизайном веб-иконок, но у них много индивидуальности, чтобы выделить ваш следующий проект и поразить аудиторию.

    Стреляйте на Луну с этими красивыми космическими иконами. Вы получите более 230 символов, включая космические корабли, планеты и многое другое! Их очень легко использовать, поскольку они представляют собой шрифт дингбата, и если вы начнете вводить числа, вы найдете всю солнечную систему.

    Иконки погоды и шрифт

    (32 иконки, элементы Envato)

    Эта коллекция иконок идеальна для любой ситуации, в любую погоду.Помимо прочего, этот набор значков погоды также можно загрузить в качестве шрифта для облегчения использования, и вы найдете 32 значка, отображающих все условия. Вы также получите полностью редактируемый набор иконок AI.

    Если точные прогнозы необходимы для вашего следующего проекта, вам понравится этот набор значков на тему погоды. С более чем 200 значками (включая специальные значки, такие как 28 лунных фаз), вы будете готовы создать что-то удивительное! Вы можете легко настроить их с помощью CSS в соответствии со своими потребностями.

    Получите 40+ минималистичных и дружелюбных иконок погоды с Meteocons.Этот набор предлагает все мыслимые форматы; от SVG до настольных и веб-шрифтов. Их можно использовать как в личных, так и в коммерческих целях, и вы даже можете создать свой собственный шрифт с помощью часто используемых значков. Обновления иконок тоже бесплатны!

    Добавьте больше цвета в свой дизайн с помощью Stackicons, коллекции из более чем 60 обновленных значков с логотипами брендов; от Dribbble до Reddit. Они добавят индивидуальности вашему стандартному дизайнерскому комплекту. Вы можете выбрать обычные значки, различные округлые варианты или квадратные значки.Здесь каждый найдет что-нибудь для себя!

    Если вы ищете невероятных социальных иконок, обратите внимание на Socialicious. Он предоставляет значки социальных сетей в виде шрифта, что делает их невероятно простыми в использовании и еще проще настраивать. Интегрируйте их с помощью одной строчки кода и настраивайте с помощью CSS.

    Увлекательные и динамичные, Mono Social — это иконы социальных сетей с веселой индивидуальностью. Вы можете использовать их бесплатно и выбрать один из 3 вариантов презентации (закругленный, круговой, обычный), соответствующий вашему стилю.Используйте athem с CSS, HTML и SCSS. Они бесплатны для личного и коммерческого использования.

    Socialico, созданный Джелио Димитровым, представляет собой пакет из 74 ярких и привлекательных значков социальных сетей. Они упакованы в виде веб-шрифтов, поэтому каждый символ на клавиатуре создает красивый значок с множеством вариантов представления. Поскольку эти значки шрифтов бесплатны, добавьте их в свой набор инструментов!

    keremciu / sketch-iconfont: этот плагин поможет вам легко вставлять значки из шрифтов значков и управлять ими.

    Всем привет! Я только что создал совершенно новый плагин, чтобы упростить и надёжность рабочего процесса. Если вы хотите протестировать, он находится здесь: https://github.com/keremciu/sketch-iconfont-web и ждем ваших отзывов! 🙂


    ⚠️ ПЕРЕД ОБНОВЛЕНИЕМ : Если вы используете собственные шрифты для значков, экспортируйте набор шрифтов следующим образом: ВИДЕО затем обновите плагин, вы можете установить свой custom-font-bundle без потери пользовательских шрифтов.

    Dark Mode поддерживает — 18 марта 2019 г. (версия 4.7,0)

    Поддерживает версию 48 — 7 декабря 2017 г. (Версия 4.6.0)

    Скоро появится новая версия и видео о выпуске — 19 января 2017 г.

    • Снял видео про импорт кастомных иконок (ВИДЕО)

    Поддерживает версию 41 — 9 ноября 2016 г. (Версия 4.5.1)

    • Метод ColorWithSVGString устарел, я исправил его
    Исправлена ​​проблема выбора нетекстового слоя — 4 октября 2016 г. (Версия 4.4.2)

    Проблема здесь https: // twitter.com / mwstrmnn / status / 782979129780146178

    Новые функции и исправления — 17 августа 2016 г. (Версия 4.4.0)

    Привет, ребята, я исправил проблему в Sketch версии 3.91.

    Также у нас есть новые функции, такие как множественное изменение текста, я скоро поделюсь гифками о них. Прежде чем делиться гифками, вы можете их найти и использовать 🙂

    Первая установка

    Первое использование? нужно посмотреть (ЭТО ВИДЕО)

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

    Новая функция — команда преобразования — 29 апреля 2016 г.

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

    Использование шрифтов со значками в эскизе

    Этот плагин помогает вам легко вставлять и управлять значками из шрифтов значков, такими как FontAwesome, Ion или Material Design Icons, в ваши проекты Sketch.

    Используйте любой графический шрифт.

    Сам плагин не имеет встроенного шрифта. Вам нужно будет загрузить и установить шрифты, которые вы хотите использовать, непосредственно от издателя шрифтов. Однако самые популярные из них собраны в пакет, который вы можете легко скачать отсюда: https: // github.com / keremciu / font-bundles

    =======

    — Характеристики

    Зачем это нужно

    Дизайнеру: Когда дизайнер хочет добавить значок из шрифта значка — например, Material Design, fontawesome и т. Д. — ему обычно нужно найти шпаргалку, содержащую все значки шрифта, а затем вручную скопировать + вставить каждую из них, которую они хотят использовать, в свои дизайн — или используйте стороннее приложение. Отнимает много времени и громоздко.

    • Теперь вы можете легко просмотреть и добавить любой значок прямо в Sketch!

    Разработчику: Когда разработчик хочет узнать имя значка, который использовался Дизайнером, ему необходимо просмотреть длинный список значков, пока он не найдет его.Отнимает много времени и громоздко.

    • Теперь вы можете легко узнать название значка прямо в Sketch, без необходимости выполнять поиск!

    =======

    — Установка

    Использование Sketch Toolbox

    1. Установите плагин Sketch Iconfont прямо из Sketch Toolbox.
    2. Установите шрифт, содержащий файл шрифта svg, или установите пакет шрифтов, такой как тот, который представлен здесь: https://github.com/keremciu/font-bundles

    Вручную

    1. Загрузите и извлеките ZIP-пакет этого плагина из этого репо.
    2. Поместите папку в папку плагинов Sketch (используйте Plugins> Reveal Plugins Folder , чтобы найти папку плагинов).
    3. Установите шрифт, содержащий файл шрифта svg, или установите пакет шрифтов, такой как тот, который представлен здесь: https://github.com/keremciu/font-bundles

    =======

    — Документация

    Это небольшая документация по командам
    Команда Описание
    Установить пакет шрифтов Установите недавно загруженный пакет шрифтов.
    Экспортируйте ваш Font-Bundle Экспортируйте или сделайте резервную копию всех ранее установленных шрифтов значков. Рекомендуется использовать перед установкой новой версии плагина.
    Установить шрифт Установите только что загруженный шрифт, содержащий файл шрифта svg.
    Удалить шрифт Удалить ранее установленный шрифт.
    Вставка сетки Вставьте значок, выполнив поиск в визуальной таблице сетки.
    Название Вставка Вставьте значок по имени.
    HTML выбранной иконки Чтобы использовать значок в Интернете или на мобильном устройстве, выберите его и используйте эту команду.

    — Минимальные зависимости

    • OSX Эль-Капитан и Йосемити (№ 44)
    • Эскиз 3.4.4.

    Следите за мной в твиттере, чтобы получать обновления. http://twitter.com/keremciu

    Лицензия

    MIT

    =======

    Пожертвовать

    🍻

    как насчет того, чтобы помочь мне сэкономить время? Если вы хотите купить мне пиво, вы можете приготовить его через PayPal, тогда я могу больше сосредоточиться на этом, пока пил пиво 🍺https: // www.paypal.me/ciukerem

    Старая версия

    Вы можете увидеть старую версию этого плагина здесь: http://i.imgur.com/EBGmlSe.gif — и вы можете скачать ее отсюда: https://github.com/keremciu/sketch-iconfont/tree/ старая версия

    ❍ Иконка Шрифт

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

    Используя приложение IcoMoon, вы можете создавать свои собственные шрифты, содержащие только те значки, которые вам нужны.

    Pixel Perfect Результаты

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

    Бесплатные иконки, бесплатное приложение

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

    Удивительный инструмент для иконографии

    Приложение IcoMoon — это усовершенствованный инструмент для создания иконок.Он позволяет сортировать значки, управлять коллекциями значков или делать значки доступными для поиска, добавляя к ним теги. Помимо шрифтов, вы можете создавать значки в PNG, SVG, полимерные значки, PDF-файлы, CSH, XAML и CSS-спрайты любого размера и цвета по вашему желанию.

    Импортируйте собственные векторы

    В приложении IcoMoon вы можете импортировать собственные векторы (изображения SVG или шрифты SVG). Импорт иконок происходит локально в вашем браузере. Ваши векторы не будут загружены на наши серверы при их импорте.Также доступны некоторые основные параметры редактирования, такие как перемещение, зеркальное отображение и поворот.

    Работает в автономном режиме

    После загрузки в ваш браузер приложение IcoMoon работает в автономном режиме. Когда вы импортируете значок или генерируете шрифт, все происходит локально, в вашем собственном браузере . Ваши значки / шрифты не будут загружены на наши серверы. Вы даже можете загрузить приложение IcoMoon, если у вас нет подключения, если вы установите его из Интернет-магазина Chrome.

    Множественные лигатуры на символ

    Вместо того, чтобы назначать вашим глифам отдельные символы, вы можете назначать им разные теги (лигатуры).Эта функция особенно полезна для резервных копий или использования шрифтов на рабочем столе. Узнать больше…

    14 бесплатных графических шрифтов для веб-дизайнеров

    Примечание: Перед использованием любого из перечисленных ниже графических шрифтов вы должны прочитать их лицензию и условия использования.

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

    Иониконы Страница загрузки

    2. Шрифт значка Shock (1121 значок)

    Полное раскрытие информации: Я являюсь основателем семейства веб-сайтов Shock, и этот бесплатный шрифт с иконками был создан моей компанией.

    Скачать шрифт

    Shock Icon, страница

    Dripicons Загрузить страницу

    4. Entypo (250 иконок)

    Entypo Загрузить страницу

    5. Соса (160 иконок)

    Sosa Загрузить страницу

    Foundation Icons Скачать страницу

    7.Типики (308 иконок)

    Typicons Загрузить страницу

    The Elegant Icon Загрузка шрифта Страница

    Иконки карты Загрузить Страница

    Лигатурные символы Загрузить страницу

    Heydings Иконки Скачать Страница

    Fontawesome Страница загрузки

    13. Signify (38 иконок)

    Signify Страница загрузки

    14. PulsarJS (73 иконки)

    PulsarJS Загрузить страницу

    Как использовать шрифты со значками

    Узнайте, как использовать шрифты значков, прочитав эти руководства:

    • HTML для использования шрифтов значков (css-tricks.com)
    • Зачем и как использовать графические шрифты (vanseodesign.com)
    • Как использовать иконочные шрифты на своем веб-сайте (designmodo.com)

    Реальный совет

    WebFX — это агентство цифрового маркетинга с полным спектром услуг, которое предлагает все, от SEO-ссылок до маркетинга в социальных сетях. Знание того, как успешно использовать иконочные шрифты, выделит вас среди ваших конкурентов. Стоимость веб-дизайна не должна стоять между вами и вашим бизнесом, привлекающим новых клиентов. WebFX предлагает отличные советы по отраслевому дизайну веб-сайтов, например, по веб-дизайну для отелей.

    Если вы хотите улучшить свой сайт или узнать больше, вы можете связаться с нами по телефону 888-601-5359, чтобы поговорить со стратегом.

    10 лучших бесплатных иконочных шрифтов для веб-дизайнеров

    Веб-шрифты с открытым исходным кодом позволяют дизайнерам радикально изменять дизайн своих страниц и типографские стили. И некоторые из этих веб-шрифтов используют наборы значков для переноса векторных значков в CSS. Если вы ищете 100% бесплатные шрифты для иконок для своего веб-сайта, то в этом посте собраны все лучшие из них. Каждый пакет значков полностью бесплатен с векторами SVG и форматами веб-шрифтов для включения в ваши таблицы стилей и веб-страницы.

    НЕОГРАНИЧЕННАЯ ЗАГРУЗКА: 1500000+ иконок и элементов дизайна



    СКАЧАТЬ

    1. Капитан Икона

    Мой любимый веб-шрифт — пакет Captain Icon, созданный дизайнером Марио дель Валле. Это полностью бесплатный проект с открытым исходным кодом, размещенный на GitHub, с векторными файлами и веб-шрифтами.

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

    Но я не думаю, что Captain Icon подходит для каждого проекта. Его лучше всего использовать на творческих сайтах, где нарисованный от руки стиль сочетается с макетом.

    2. Octicons

    GitHub недавно открыл собственный пакет значков под названием Octicons. Этот бесплатный набор значков в настоящее время находится в версии 5.0 и включает в себя десятки значков с некоторыми основными символами.

    Эти значки можно найти по всему сайту GitHub. Но они достаточно просты, чтобы работать практически с любым интерфейсом.

    Если вам нужен простой и легкий иконочный шрифт, Octicons вас не подведет.

    3. Типики

    Набор Typicons с закругленными углами и более простыми очертаниями идеально подходит для любого сайта. Он поставляется с более чем 330 уникальными иконками в одинаковом стиле.

    Пакет полностью бесплатный, а также доступен на GitHub. Это означает, что вы можете включать значки прямо на свой сайт и даже при необходимости вносить в них изменения.

    Немногие знают о Typicons, но это один из лучших доступных иконочных веб-шрифтов.Они могут работать даже на iOS с небольшими изменениями и специальными фрагментами кода.

    4. Zondicons

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

    Но вы можете увидеть все примеры на демонстрационной странице, включая классы CSS, необходимые для их правильной работы. Основная ссылка для загрузки Zondicons идет прямо с веб-сайта, поэтому сложно сказать, обновлялись ли они когда-либо или добавлялись новые значки.

    Я рекомендую этот шрифт, если вы не против более простого дизайна. Это значительно упрощает использование значков, но они также могут сливаться с сайтом в более «общем» стиле.

    5. Entypo

    Семейство иконок веб-шрифтов Entypo существует уже несколько лет. Эти значки великолепны, и они первоклассные, когда дело доходит до бесплатных услуг.

    Новые значки добавляются время от времени, и к ним очень легко получить доступ. Шрифты также разделены на два пакета: основной пакет и социальный пакет.Так что, если вам не нужны значки социальных сетей, вы можете немного уменьшить размер файла шрифта.

    Entypo поставляется с более чем 400 значками и великолепной лицензией CC sharealike. Чтобы узнать больше об установке и настройке значков, вы должны прочитать страницу часто задаваемых вопросов и посетить главное репозиторий GitHub.

    6. MFG Labs

    Один из новых шрифтов в этом списке от MFG Labs со своим собственным набором значков. Это совершенно бесплатно и размещено на GitHub для всеобщего доступа.

    Каждый значок поставляется со стандартными форматами веб-шрифтов с использованием PUA Unicode в CSS. Это полностью семантически во всех браузерах и помогает уменьшить конфликты с другим кодом CSS.

    Иконки

    MFG Labs имеют уникальный стиль, который выделяется среди всех остальных. Я настоятельно рекомендую этот шрифт для значков для любого типа веб-сайтов, коммерческих или иных.

    7. Иониконы

    Разработчики

    Native любят Ionic Framework, и это один из самых популярных вариантов для мобильных приложений.Команда Ionic решила выпустить свои значки в виде веб-шрифта под названием Ionicons.

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

    Я в основном рекомендую Ionicon для новичков, которые раньше не использовали иконочные шрифты. Их очень легко настроить, и как только вы поймете, как они работают, вы можете перейти практически к любому другому значку веб-шрифта.

    8. Font Awesome

    Оригинальный веб-шрифт и личный выбор Bootstrap, Font Awesome, пожалуй, окончательный выбор для большинства веб-дизайнеров.

    Font Awesome существует уже много лет и считается первым крупным иконочным шрифтом с открытым исходным кодом. Он часто получает новые обновления со свежими значками, и в настоящее время он находится в версии 4.7, которую можно бесплатно загрузить на GitHub.

    Каждый значок полностью масштабируется и поддерживается непосредственно в CSS. Вы можете изменять цвета, тени, фоновые градиенты и многое другое, используя чистый CSS3.

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

    9. Значки материального дизайна

    Материальный дизайн Google привнес новый подход к UI / UX в Интернете. Это привело к появлению множества новых фреймворков и ресурсов, включая этот шрифт значка материального дизайна.

    Эти значки материалов абсолютно бесплатны и доступны на GitHub. Этот набор значков абсолютно массивен: более 1000 значков , охватывающих широкий спектр функций интерфейса.

    И поскольку это открытый исходный код, вы можете повторно использовать их в любых проектах и ​​даже настраивать значки, если это необходимо.Идеально подходит для тех, кто работает с правилами Google в отношении материалов в Интернете.

    10. Девиконс

    Пакет Devicons — один из новейших веб-шрифтов, который вы можете попробовать с упором на технические логотипы и брендинг.

    На этом значке шрифта есть все логотипы, о которых вы только можете подумать, от крупных технических игроков, таких как Google, до новых логотипов CMS, таких как Ghost. Признаюсь, это полезно только для сайтов, которым нужны векторные технологические логотипы, которых определенно не будет.

    Но это здоровенный набор иконок, и это совершенно бесплатно! На этой странице вы найдете сведения об установке бесплатной версии CDN, которую можно использовать для сокращения времени загрузки.

    Заключение

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

    Этот пост может содержать партнерские ссылки. См. Раскрытие партнерских ссылок здесь .

    Icon Fonts — Vuetify

    Vuetify поставляется с начальной загрузкой с поддержкой Material Design Icons, Material Icons, Font Awesome 4 и Font Awesome 5.По умолчанию приложения будут использовать значки Material Design.

    # Установка шрифтов значков

    Вы должны включить указанную библиотеку значков (даже если используется по умолчанию). Это можно сделать, включив ссылку на CDN или импортировав библиотеку значков в ваше приложение.

    # Значки дизайна материалов

    Используйте этот инструмент для поиска любых значков дизайна материалов и копирования их в буфер обмена, щелкнув элемент.

    Это шрифт значков по умолчанию для Vuetify.Вы можете включить его через CDN:

      
      

    Или как локальная зависимость:

      $ yarn add @ mdi / font -D
    // ИЛИ
    $ npm install @ mdi / font -D
      
     
    
    импортировать '@ mdi / font / css / materialdesignicons.css'
    импортировать Vue из 'vue'
    импортировать Vuetify из vuetify / lib
    
    Vue.use (Vuetify)
    
    экспортировать новый Vuetify по умолчанию ({
      icons: {
        iconfont: 'mdi',
      },
    })
      

    # Значки дизайна материалов — JS SVG

    Используйте пути SVG, указанные в @ mdi / js.Это рекомендуемая установка при оптимизации вашего приложения для производства. Вам нужно включить ТОЛЬКО , если вы планируете использовать больше значков по умолчанию.

      $ пряжа add @ mdi / js -D
    // ИЛИ
    $ npm install @ mdi / js -D
      

    Укажите mdiSvg iconfont:

     
    
    импортировать Vue из 'vue'
    импортировать Vuetify из vuetify / lib
    
    Vue.use (Vuetify)
    
    экспортировать новый Vuetify по умолчанию ({
      icons: {
        iconfont: 'mdiSvg',
      },
    })
      

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

     
    
    <шаблон>
       {{svgPath}} 
    
    
    <сценарий>
      импортировать {mdiAccount} из '@ mdi / js'
    
      экспорт по умолчанию {
        данные: () => ({
          svgPath: mdiAccount
        }),
      }
    
      

    # Значки материалов

    Установка такая же, как описано выше. Для проектов без процесса сборки рекомендуется импортировать значки из CDN

      
      

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

      $ yarn add material-design-icons-iconfont -D
    // ИЛИ
    $ npm установить материал-дизайн-значки-значок-шрифт -D
      

    После установки пакета импортируйте его в свой основной файл js. Обычно это main.js , index.js или app.js , расположенный в папке src / . Если вы используете приложение SSR, у вас может быть клиент .js или файл entry-client.js .

     
    
    import 'material-design-icons-iconfont / dist / material-design-icons.css'
    импортировать Vue из 'vue'
    импортировать Vuetify из vuetify / lib
    
    Vue.use (Vuetify)
    
    экспортировать новый Vuetify по умолчанию ({
      icons: {
        iconfont: 'md',
      },
    })
      

    # Font Awesome 4 Icons

    То же, что и выше. Самый простой способ проверить это в своем проекте — установить FontAwesome через cdn:

      
      

    Установка FontAwesome 4 такая же, как и его более новая версия, только из другого репозитория. Вы будете нацелены на репозиторий font-awesome , а не на репозиторий @fortawesome .

      $ пряжа добавить [email protected] -D
    // ИЛИ
    $ npm установить [email protected] -D
      

    Не забывайте, ваш проект должен распознавать CSS. Если вы используете webpack, установите и настройте загрузчик css.

     
    
    импортировать 'font-awesome / css / font-awesome.min.css'
    импортировать Vue из 'vue'
    импортировать Vuetify из vuetify / lib
    
    Vue.use (Vuetify)
    
    экспортировать новый Vuetify по умолчанию ({
      icons: {
        iconfont: 'fa4',
      },
    })
      

    # Font Awesome 5 Icons

    Самый простой способ начать работу с FontAwesome — использовать компакт-диск. В заголовке вашего основного index.html поместите этот фрагмент:

      
      

    Для локальной установки вы можете загрузить бесплатную версию FontAwesome , используя предпочитаемый вами менеджер пакетов:

      $ yarn add @ fortawesome / fontawesome-free -D
    // ИЛИ
    $ npm install @ fortawesome / fontawesome-free -D
      

    В основной точке входа просто импортируйте all.css пакета. Если вы используете настроенный проект webpack, вам необходимо настроить поддержку файлов .css и с помощью загрузчика css webpack.Если вы уже используете Vue CLI, это будет сделано автоматически.

     
    
    импортировать '@ fortawesome / fontawesome-free / css / all.css'
    импортировать Vue из 'vue'
    импортировать Vuetify из vuetify / lib
    
    Vue.use (Vuetify)
    
    экспортировать новый Vuetify по умолчанию ({
      icons: {
        iconfont: 'fa',
      },
    })
      

    # Font Awesome SVG Icons

    Добавьте необходимые зависимости.

      $ yarn add @ fortawesome / fontawesome-svg-core @ fortawesome / vue-fontawesome @ fortawesome / free-solid-svg-icons -D
    // или
    $ npm install @ fortawesome / fontawesome-svg-core @ fortawesome / vue-fontawesome @ fortawesome / free-solid-svg-icons -D
      

    Затем добавьте глобально font-awesome-icon компонент и установите faSvg как iconfont в конфигурации Vuetify.

     
    
    импортировать Vue из 'vue'
    импортировать Vuetify из vuetify / lib
    импортировать {библиотеку} из '@ fortawesome / fontawesome-svg-core'
    импортировать {FontAwesomeIcon} из '@ fortawesome / vue-fontawesome'
    импортировать {fas} из '@ fortawesome / free-solid-svg-icons'
    
    Vue.component ('font-awesome-icon', FontAwesomeIcon)
    library.add (fas)
    
    Vue.use (Vuetify)
    
    экспортировать новый Vuetify по умолчанию ({
      icons: {
        iconfont: 'faSvg',
      },
    })
      

    # Использование настраиваемых значков

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

     
    
    импортировать Vue из 'vue'
    импортировать Vuetify из vuetify / lib
    
    Vue.use (Vuetify)
    
    экспортировать новый Vuetify по умолчанию ({
      icons: {
        iconfont: 'fa',
        значения: {
          отменить: 'fas fa-ban',
          меню: 'fas fa-ellipsis-v',
        },
      },
    })
      

    Вы можете импортировать и назначить svg значению значка. Импортированный svg должен содержать только путь без оболочки .Для импорта более сложного SVG используйте значок компонента.

     
    
    импортировать Vue из 'vue'
    импортировать Vuetify из vuetify / lib
    импортировать myIconSvg из myIcon.svg
    
    Vue.use (Vuetify)
    
    экспортировать новый Vuetify по умолчанию ({
      icons: {
        iconfont: 'fa',
        значения: {
          customIconSvg: myIconSvg,
          customIconSvgPath: 'M14.989,9.491L6.071,0.537C5.78,0.246,5.308,0.244,5.017,0.535c-0.294,0.29-0.294,0.763-0.003,1.054l8.394,8.428L5.014,18.41c -0.291,0.291-0.291,0.763,0,1.054c0.146,0.146,0.335,0.218,0.527,0.218c0.19,0,0.382-0.073,0.527-0.218l8.918-8.919C15.277,10.254,15.277,9.784,14.989,9.491z ',
        },
      },
    })
      

    Если вы используете библиотеку значков, у которой нет предустановки, вы можете создать собственную.

     
    
    импортировать Vue из 'vue'
    импортировать Vuetify из vuetify / lib
    
    const MY_ICONS = {
      полный: '...',
      отменить: '...',
      Закрыть: '...',
      Удалить: '...',
      Очистить: '...',
      успех: '...',
      Информация: '...',
      предупреждение: '...',
      ошибка: '...',
      предыдущая: '...',
      следующий: '...',
      checkboxOn: '...',
      checkboxOff: '...',
      checkboxIndeterminate: '...',
      разделитель: '...',
      Сортировать: '...',
      расширять: '...',
      меню: '...',
      подгруппа: '...',
      падать: '...',
      radioOn: '...',
      radioOff: '...',
      редактировать: '...',
      ratingEmpty: '...',
      ratingFull: '...',
      ratingHalf: '...',
      загрузка: '...',
      первый: '...',
      последний: '...',
      развернуть: '...',
      файл: '...',
    }
    
    Vue.use (Vuetify)
    
    экспортировать новый Vuetify по умолчанию ({
      icons: {
        значения: MY_ICONS,
      },
    })
      

    # Пользовательские значки многократного использования

    Vuetify автоматически объединит любые строки значков, предоставленные в пул доступных пресетов.Это позволяет вам создавать настраиваемые строки, которые можно использовать в вашем приложении, просто ссылаясь на глобальные значки .

     
    
    импортировать Vue из 'vue'
    импортировать Vuetify из vuetify / lib
    
    Vue.use (Vuetify)
    
    экспортировать новый Vuetify по умолчанию ({
      icons: {
        iconfont: 'mdi',
        значения: {
          продукт: 'mdi-dropbox',
          поддержка: 'mdi-lifebuoy',
          steam: 'mdi-steam-box',
          ПК: 'mdi-desktop-classic',
          xbox: 'mdi-xbox',
          playstation: 'mdi-playstation',
          переключатель: 'mdi-nintendo-switch',
        },
      },
    })
      

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

     
    
    <шаблон>
      
    $ vuetify.icons.product $ product
    <сценарий> экспорт по умолчанию { данные: () => ({ Пользователь: { имя: 'Джон Лейдер', платформа: 'pc', }, }), вычислено: { Платформа () { вернуть '$' + это.user.platform } } }

    # Значки компонентов

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

     
    
    импортировать Vue из 'vue'
    импортировать Vuetify из vuetify / lib
    импортировать IconComponent из './IconComponent.vue'
    
    Vue.use (Vuetify)
    
    экспортировать новый Vuetify по умолчанию ({
      icons: {
        значения: {
          товар: {
            компонент: IconComponent,
            props: {
              имя: 'продукт',
            },
          },
        },
      },
    })
      

    Если вы хотите, чтобы ваш значок SVG правильно наследовал цвета и масштаб, обязательно добавьте к нему следующий CSS:

     .ваш-svg-icon
      fill: currentColor
      

    # Отсутствуют значки материалов

    Некоторые значки материалов по умолчанию отсутствуют. Например, человек и person_outline доступны, но visibility_outline нет, а видимость — нет. Чтобы использовать отсутствующие значки материалов, добавьте шрифт ниже (удалите другой шрифт материала, если он уже зарегистрирован).

      <ссылка
          rel = "таблица стилей"
          href = "https: //fonts.googleapis.com / css? family = Материал + Иконки | Материал + Иконки + Контур | Материал + Иконки + Два + Тон | Материал + Иконки + Круглый | Материал + Иконки + Sharp »
    />
      

    Вы можете добавить свой собственный компонент. Допустим, это @ / components / MaterialIcon.vue .

      <шаблон>
       {{parsed.id}} 
    
    
    <сценарий>
    экспорт по умолчанию {
      props: {
        название: {
          тип: String
        }
      },
      вычислено: {
        parsed () {
          const check = (customSuffixes, standardSuffix) => {
            for (пусть суффикс customSuffixes) {
              суффикс = `_ $ {суффикс}`
              если это.name.endsWith (суффикс)) {
                возвращение {
                  суффикс: стандартный
                  id: this.name.substring (0, this.name.indexOf (суффикс))
                }
              }
            }
            вернуть ложь
          }
    
          возвращение (
            check (['заполнить', 'заполнить'], '') ||
            check (['контур', 'контур'], 'контур') ||
            check (['двухцветный', 'двухцветный'], 'двухцветный') ||
            check (['круглый', 'округленный'], 'круглый') ||
            check (['Sharpened'], 'Sharpened') || {
              суффикс: '',
              id: это.название
            }
          )
        },
        standardClass () {
          if (this.parsed.suffix) {
            return `material-icons - $ {this.parsed.suffix}`
          }
          вернуть 'material-icons'
        }
      }
    }
    
      

    Затем вам нужно зарегистрировать точные значки материалов, которые вы хотите.

      импортировать Vue из vue
    импортировать Vuetify из vuetify / lib
    импортировать MaterialIcon из '@ / components / MaterialIcon'
    
    function missingMaterialIcons (ids) {
      const icons = {}
      for (const id идентификаторов) {
        for (константный суффикс ['заливка', 'контур', 'двухцветный', 'круглый', 'резкий']) {
          const name = `$ {id} _ $ {суффикс}`
          значки [имя] = {
            компонент: MaterialIcon,
            props: {
              название
            }
          }
        }
      }
      вернуть значки
    }
    
    Vue.используйте (Vuetify, {
      
      icons: {
        значения: {
          ... missingMaterialIcons (['видимость', 'видимость_выкл'])
          
        }
      }
    })
      

    Наконец, вы можете использовать такие значки материалов.

     
    
    
    
     $ visibility_outline 
      

    Готовы к большему?

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

    Добавить комментарий

    Ваш адрес email не будет опубликован.

    © 2019 Штирлиц Сеть печатных салонов в Перми

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