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

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

Иконки, используемые для декорирования или визуального стиля

Если иконка используется для декорирования или отображения бренда, то они не должны быть объявлены общедоступно, тк они влияют на приложения, читающие сайты в слух. Кроме того, если вы используете иконки, чтобы визуально подчеркнуть или добавить стиль контенту, то в существующем HTML они не должны быть продублированы в описании для вспомогательных технологий, используемых пользователем. Вы можете убедиться в том, что элемент не читается, добавив ему атрибут aria-hidden="true".

<i aria-hidden="true"></i>

<h2>
  <i aria-hidden="true"></i>
  Pied Piper, A Middle-Out Compression Solution Making Data Storage Problems Smaller
</h2>
 

<a href="https://github. com/FortAwesome/Font-Awesome"><i aria-hidden="true"></i> View this project's code on Github</a>

Иконки с семантической или интерактивной целью

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

Если иконка

The simplest way to provide a text alternative is to use the aria-hidden="true" attribute on the icon and to include the text with an additional element, such as a <span>, with appropriate CSS to visually hide the element while keeping it accessible to assistive technologies. In addition, you can add a title

<dl>
  <dt>
    <i aria-hidden="true" title="Time to destination by car"></i>
    <span>Time to destination by car:</span>
  </dt>
  <dd>4 minutes</dd>

  <dt>
    <i aria-hidden="true" title="Time to destination by bike"></i>
    <span>Time to destination by bike:</span>
  </dt>
  <dd>12 minutes</dd>
</dl>

<i aria-hidden="true" title="60 minutes remain in your exam"></i>
<span>60 minutes remain in your exam</span>

<i aria-hidden="true" title="30 minutes remain in your exam"></i>
<span>30 minutes remain in your exam</span>

<i aria-hidden="true" title="0 minutes remain in your exam"></i>
<span>0 minutes remain in your exam</span>
 

If an icon represents an interactive element

In the case of focusable interactive elements, there are various options to include an alternative text or label to the element, without the need for any visually hidden <span> or similar.

<a href="path/to/shopping/cart" aria-label="View 3 items in your shopping cart">
  <i aria-hidden="true"></i>
</a>

<a href="#navigation-main" aria-label="Skip to main navigation">
  <i aria-hidden="true"></i>
</a>
 

<a href="path/to/settings" aria-label="Delete">
  <i aria-hidden="true" title="Delete this item?"></i>
</a>

Шрифтовые иконки — достойная альтернатива растру

Чем иконочный шрифт лучше иконок jpg/png

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

Иконочный шрифт это прежде всего шрифт и следовательно к таким иконкам применяются все css свойства, которые можно применить к тексту. Для изменения цвета иконки не нужен графический редактор. Просто поменяй цвет в css. Кстати псевдо классы типа :hover тоже срабатывают, что даёт ещё больший простор для творчества.

Как подключить иконочный шрифт fontawesome

Где брать иконочные шрифты? Поиск выдаст кучу результатов разной степени платности и универсальности. Рассмотрим два fontello.com и fontawesome.ru

Начнём с бесплатного шрифта с хорошим описанием на русском — fontawesome.ru. Первым делом качаешь и распаковываешь архив. Копируешь папку font-awesome в папку с сайтом. Дальше нужно подключить… Думаешь шрифт? Нет. Подключаеш css файл font-awesome.

<link rel="stylesheet" href="путь/до/font-awesome/css/font-awesome.min.css">

Иконки fontawesome вставляются следующим образом. Там где должна быть иконка вставляешь строчный элемент, например <i> или <span> и добавляешь к нему класс fa и соответствующий иконке класс.  Проще сделать следующим образом. На сайте fontawesome.ru переходишь в меню Иконки и кликаешь по нужной иконке. Попадаешь на страницу где можно скопировать код, который нужно разместить там, где будет иконка. Так выглядит код для Телеграм.

<i aria-hidden="true"></i>

Просто выводом иконок дело не ограничивается. Добавляя классы можно анимировать, изменять размер, поворачивать иконки. Полный список возможностей с подробным описанием и примерами смотри на fontawesome.ru/examples/ .

Ещё один сайт где можно на халяву хапнуть шрифтовых иконок — fontello.com. Он отличается от fontawesome.ru тем, что можно создать свой набор иконок, а не тянуть все, большая часть которых не пригодиться. Чтобы создать свой набор  заходишь на  fontello.com. На вкладке Select Icons кликаеш по нужным иконкам. Рядом с красной кнопкой Download пишешь название шрифта и скачиваешь свой иконочный шрифт.

Иконки с fontello вставляются также через добавление класса к строковому элементу. Название классов смотри в файле demo.html(должен быть в скачанном архиве с шрифтом). Дефолтные названия классов можно изменить на вкладке Customize Names.

Иконочные шрифты или 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 или иконочные шрифты?

Веб-шрифты, шрифтовые иконки и спецсимволы

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

fontawesome. com — Font Awesome 5. Более 1500 бесплатных иконок, подключение через CDN, также есть возможность скачать файлы шрифта на диск

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

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

icomoon.io — Большой набор качественных SVG-иконок, на сайте можно создать свой набор и иконок конвертировать набор в иконочный шрифт, шрифт можно скачать или подключbть в проекте с помощью URL

iconify.design — Этот сервис позволяет подключить  к проекту иконки из множества наборов с помощью одного скрипта и используя один синтаксис. Iconify включает более 40 000 иконок из популярных шрифтов и наборов смайликов: Font Awesome 4 и 5, Material Design Icons, IonIcons, Vaadin Icons, Entypo + и многие другие

material.io/resources/icons — Большая коллекция красивых иконок от Google для веб-проектов и приложений Android, iOS. Иконочный шрифт подключается с помощью URL или можно скачать шрифт и подключать локально, также можно скачать SVG и PNG версии иконок

hostenko.com — В этом посте мы отобрали 27 бесплатных наборов шрифтовых иконок. Просто переходите по ссылке понравившегося набора, загружайте и добавляйте на свой сайт WordPress

Веб-шрифты

fonts.google.com — Генератор веб-шрифтов Google

fontstorage.com — Скачать бесплатно шрифты для сайта, фотошопа, Windows или Mac OS

Спецсимволы

html5book.ru — Спецсимволы HTML (символы-мнемоники) — стрелки, смайлики, крестики, галочки, звезды, математические символы и многое другое

htmlbook.ru — Для отображения символов, которых нет на клавиатуре, применяются специальные знаки, начинающиеся с амперсанда (&) и заканчивающиеся точкой с запятой (;). В таблице приведены некоторые популярные спецсимволы

unicode-table.com — Сервис поиска символов в формате Юникод (Unicode)

Калькулятор для конвертации HTML-кода в CSS-код для использования в свойстве content (content:’260E’)

React-компонент Icon — Material-UI

Руководство и рекомендации по использованию иконок в Material-UI.

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

Material-UI предоставляет два компонента для отображения системных иконок: SvgIcon используется с форматом SVG, а Icon – с иконочными шрифтами.

SVG Иконки

Компонент SvgIcon принимает в качестве дочернего элемент path SVG и преобразует его в компонент React, который отображает SVG-путь и позволяет настроить стиль иконки и её реакцию на события мыши. Элементы SVG должны быть отмасштабированы для области просмотра размером 24x24px.

Полученный значок можно либо использовать сразу, либо включить его в качестве дочернего в другие компоненты Material-UI, которые используют иконки. По умолчанию иконка наследует текущий цвет текста. При желании вы можете установить цвет иконки с помощью одного из свойств цвета темы: primary, secondary, action, error или disabled.

SVG-иконки Material

Составные части для создания собственных иконок – это интересно, но как насчет готовых вариантов? Мы предоставляем отдельный npm-пакет @material-ui/icons, который содержит более 1000 официальных иконок Material, преобразованных в компоненты SvgIcon.

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

Найти конкретную иконку можно на сайте Material: material.io/tools/icons. При импорте имейте в виду, что для названий иконок используется написание PascalCase, например:

• delete представлена как @material-ui/icons/Delete
• delete forever представлена как @material-ui/icons/DeleteForever

For *»themed»* icons, append the theme name to the icon name. For instance with the

• Иконка delete в теме Outlined представлена как @material-ui/icons/DeleteOutlined
• Иконка delete в теме Rounded представлена как @material-ui/icons/DeleteRounded
• Иконка delete в теме Two Tone представлена как @material-ui/icons/DeleteTwoTone
• Иконка delete в теме Sharp представлена как @material-ui/icons/DeleteSharp

Из данного правила существует три исключения:

• 3d_rotation представлена как @material-ui/icons/ThreeDRotation
• 4k представлена как @material-ui/icons/FourK
• 4k представлена как @material-ui/icons/FourK

{{«Демо»: «pages/components/icons/SvgMaterialIcons.js»}}

Импорт

• Если ваша среда не поддерживает tree-shaking, рекомендуется импортировать иконки следующим образом:

import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
import ThreeDRotation from '@material-ui/icons/ThreeDRotation';

• Если же у вас настроено tree-shaking, импорт иконок можно осуществлять так:

import { AccessAlarm, ThreeDRotation } from '@material-ui/icons';

Примечание: такой способ импорта именованных экспортов приведет к тому, что каждая иконка будет включена в проект, поэтому не рекомендуется его использовать без настройки tree-shaking. Кроме того, это может повлиять на производительность горячей замены модулей.

Больше SVG-иконок

Нужно еще больше SVG-иконок? Проектов существует множество, но, например, https://materialdesignicons.com предоставляет более 2000 иконок, как официальных, так и созданных сообществом. mdi-material-ui запаковывает эти иконки в виде компонентов Material-UI SvgIcons таким же образом, как @material-ui/icons делает это для официальных иконок.

Иконочный шрифт

Компонент Icon отображает иконку из любого иконочного шрифта с поддержкой лигатур. Предварительно необходимо включить в проект шрифт, такой как Material icon font, с помощью, например, Google Web Fonts:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

Icon will set the correct class name for the Material icon font. For other fonts, you must supply the class name using the Icon component’s className property.

Чтобы использовать иконку, просто оберните её имя (лигатуру шрифта) в компонент Icon, например:

import Icon from '@material-ui/core/Icon';

<Icon>star</Icon>

По умолчанию иконка наследует текущий цвет текста. При желании вы можете установить цвет иконки с помощью одного из свойств цвета темы: primary, secondary, action, error или disabled.

Шрифтовые иконки Material

add_circleadd_circleadd_circleadd_circleadd_circleadd_circle

Font Awesome

Font Awesome можно использовать с компонентом Icon следующим образом:

Font vs SVG. Which approach to use?

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

For more details, you can check out why GitHub migrated from font icons to SVG icons.

Доступность

Иконки могут передавать всевозможную значимую информацию, поэтому важно, чтобы они охватывали максимально возможное количество людей. There are two use cases you’ll want to consider:

• Decorative Icons are only being used for visual or branding reinforcement. Если удалить их со страницы, пользователи всё равно смогут её использовать, им всё будет понятно.
• Семантические иконки – это те, которые используются для передачи смысла, а не только для украшения. В данную группу входят иконки без текста, используемые в качестве интерактивных элементов управления – кнопки, элементы форм, переключатели, и так далее.

Декоративные SVG-иконки

If your icons are purely decorative, you’re already done! We add the aria-hidden=true attribute so that your icons are properly accessible (invisible).

Семантические SVG-иконки

Если у вашей иконки есть семантическое значение, необходимо только добавить свойство titleAccess="значение". Для правильной настройки доступности добавим атрибут role="img" и элемент <title>.

В случае фокусируемых интерактивных элементов, например, кнопки с иконкой, можно использовать свойство aria-label:

import IconButton from '@material-ui/core/IconButton';
import SvgIcon from '@material-ui/core/SvgIcon';



<IconButton aria-label="delete">
  <SvgIcon>
    <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" />
  </SvgIcon>
</IconButton>

Декоративные шрифтовые иконки

If your icons are purely decorative, you’re already done! We add the aria-hidden=true attribute so that your icons are properly accessible (invisible).

Семантические шрифтовые иконки

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

import Icon from '@material-ui/core/Icon';
import Typography from '@material-ui/core/Typography';



<Icon>add_circle</Icon>
<Typography variant="srOnly">Создать пользователя</Typography>

Справка

[IconTV] Новый тип TV с иконками / Русскоязычное сообщество MODX

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

Небольшая предыстория

Идея зародилась, когда достало искать иконки в базе fontawesome, и произносились слова «а почему не автоматизировать этот процесс, а может он уже существует?». Несколько часов поисков не дали нужного результата, пришлось делать самому. Вот и первая бета, многие мне говорили делать компонент платным, вот задумался как платный или бесплатный, думаю как первый компонент то сделаю бесплатным, так как решил потом сделать поддержку SVG платной, но со временем передумал. Так как был небольшой интерес не было желания развивать и здесь появился @Олег Щавелев который поддержал компонент и его развитие. Так и свет увидел ещё SVG формат. А может еще есть идеи. Что скажите?

Что может компонент?

На текущий момент, он умеет работать в двух режимах: SVG и популярными шрифтовыми библиотеками:

• FontAwesome v 4.3.0
• FontAwesome v 4.7.0
• FontAwesome v 5
• Simple Icons

Тип SVG (icontvSVG)

Все очень просто, создаем новое тв-поле и выбираем тип поле “IconTVSVG” далее появляется поле где вы указываете директорию где будут размещаться иконки. Создали директорию заходим во вкладку файлы и заливаем наши иконки.

Далее переходим в ресурс и выбираем иконку которая нам необходима. Типа вывода два либо alias иконки, или спрайт svg. Если вы выбрали первый вариант, то заранее необходимо подготовить шрифтовые иконки. Оптимальным вариантом на мой взгляд является сервис icomoon.io, он очень интуитивный, думаю не требует пояснений.

Тип иконок (icontv)

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

Ну что поиграемся с иконками?

Если найден баг создавайте issue.

Шрифтовые иконки Simple Line Icons

Всем привет. Шрифтовые иконки постепенно начинают вытеснять обычные сборки иконок в растровой графике (png, jpg и так далее). Популярность Font Awesome в создании интерфейса сайта врядли кто-то будет оспаривать. Но у этого шрифтового архива иконок также есть достаточно много неплохих аналогов.

Хочу Вас познакомить с шрифтовыми иконками Simple Line Icons. В сборке 180 иконок, как классических: юзер, стрелочка вправо, влево, телефон и так далее; так и оригинальных: кошелек, ракета, кубок. Для создания интерфейса на сайте, Вам этих иконок хватит с лихвой.

Подключение иконок

1. Сперва нужно скачать архив и его разархивировать

2. Теперь нужно залить необходимые файлы на сайт, а именно:

• Css файл simple-line-icons.css из папки css в вашу папку css (скорее всего эта папка у вас уже есть, там лежат все ваши стили, если нет, то создайте ее)
• Папку fonts в корень сайта

3. Далее нужно подключить стили и шрифты, уже загруженные на сервер

Делается это очень просто. Нужно в блок <head> (там где подключаются у Вас все css и js файлы) вставить код подключения css файла:

<link rel="stylesheet" href="css/simple-line-icons. css">

Не забудьте, что этот файл должен быть подключен везде, где у Вас будут стоять иконки Simple Line Icons.

4. Теперь осталось только вставить необходимые иконки

Это делается следующим образом: в том месте, где вы хотите видеть иконку, Вам нужно вставить код:

<span></span>

например если мы поставим 

<span></span>

то у нас выйдет такая иконка

А вот код иконки с текстом

<span></span> имя юзера

И выглядит он так:

Не забывайте, что это шрифт и с иконкой нужно работать как с шрифтом, выставлять font-size, font-weight, line-height и так далее

Имя иконки соответствует изображению в «Демо». Если Вам понравились эти иконки, то страницу «Демо» в закладки, будет как шпаргалка. У меня всё! Добро!

Помогла статья? Угости чашечкой кофе =)

Font Mfizz — Векторные иконки для компьютерных фанатов

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

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

98 значков: один шрифт, обозначающий программирование, операционные системы и технологии.
Бесплатно и с открытым исходным кодом: Совершенно бесплатно для коммерческого использования.
Элемент управления CSS: легко настраивайте цвет значка, размер, тень и все, что возможно с помощью CSS.
Retina ready: масштабируемая векторная графика означает, что каждая иконка выглядит великолепно в любом размере.
Совместимость: Создан для бесперебойной работы с Font Awesome.

RXTX для Java гордо спонсируется Greenback.Нам нравится обслуживание, и мы думаем, что вы тоже.

Больше инженерии. Меньше бумажной работы. Расходы стали проще.

Что нового?

Посмотреть полные примечания к выпуску

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

После того, как вы приступите к работе, вы можете разместить значки Font Mfizz практически в любом месте вашего HTML, просто используя тег .

значок apache

  значок-apache
 

Совместимость

Font Mfizz был разработан для бесперебойной работы с Font Awesome. Иконки тщательно названы, чтобы не конфликтовать с Font Awesome. Когда оба шрифта используются вместе, вы получаете более полное представление о конкретных категориях значков, таких как мобильные. Например, в последней версии Font Awesome есть значки для icon-windows , icon-apple и icon-android , но отсутствуют значки icon-blackberry . Шрифт Mfizz включает icon-blackberry , и поэтому оба вместе обеспечивают более полное представление мобильных значков.

значок-окна, значок-яблоко, значок-андроид, значок-ежевика

Масштабируемый

Начать!

Используйте этот метод, чтобы получить шрифт Mizz CSS по умолчанию.

Предупреждения

В то время как значки Font Awesome обычно выглядят хорошо даже при меньшем размере, большинство значков в Font Mfizz лучше смотрятся на ~ 20+ пикселей или выше. Большинство значков в этом пакете были созданы путем ручной настройки необработанных файлов SVG / векторов для каждой марки. Эмпирическое правило заключалось в том, чтобы сохранить символическую целостность оригинального логотипа, поместив его в поле просмотра 100 x 100 пикселей только для одного цвета. В некоторых случаях необработанный SVG / вектор был недоступен, и вместо него создавалось оригинальное искусство (например, icon-scala, icon-scala-alt, icon-google-code, icon-playframework, icon-playframwork-alt и т. Д.) .

Иконки

Приложения и операционные системы

Бренды

Базы данных

Типы файлов

Каркасы

Языки программирования

Разное (устарело)

мобильный

Запросить или добавить новые значки?

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

Лицензия

Этот проект находится под лицензией MIT и © 2013-2015 Fizzed, Inc. Вы можете найти копии всех лицензий в файле проектов LICENSE.txt.

Все значки, представляющие коммерческие компании, являются товарными знаками соответствующих владельцев. Использование этих товарных знаков не означает одобрения владельца товарного знака со стороны Fizzed, Font Mfizz или наоборот.

Обновления? Нужна помощь?

Следите за @fizzed_inc в Твиттере, чтобы следить за обновлениями и последними новостями.

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

Font Awesome — плагин для WordPress

Официальный способ использования значков Font Awesome Free или Pro на вашем сайте, предоставленный вам командой Font Awesome.

Новый плагин, замена старого плагина

Это новый, полностью переписанный плагин, протестированный с последними версиями WordPress и Font Awesome.Он заменяет старый плагин, который раньше занимал это место в каталоге плагинов WordPress, который больше не поддерживался. Большое спасибо Рэйчел Бейкер и команде, стоящей за бывшим плагином, за то, что запустили оригинальный плагин и позволили нам продвигать его вперед.

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

Наш официальный плагин позволяет вам использовать Font Awesome так, как вы хотите:

• Используйте значки Pro или Free.
• Воспользуйтесь последней версией или конкретной версией наших значков.
• Выберите технологию: SVG или веб-шрифт.
• Выберите загрузку значков из нашего классического CDN Font Awesome или используйте наборы Font Awesome — самый простой и надежный способ использовать наши значки в Интернете.
• И, если у вас не было возможности обновить свой проект в течение длительного времени, вы можете включить автоматическую совместимость для Font Awesome Version 4.

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

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

Установите и включите плагин
(подробности см. На вкладке «Установка»)

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

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

Шорткод для значка выглядит так:

  [icon name = "stroopwafel"]

[icon name = "stroopwafel" prefix = "fal"]
  

Или вы можете использовать базовый HTML со стандартным синтаксисом Font Awesome:

Использование значков и функций Pro
Чтобы включить значки Pro с CDN, вам необходимо добавить свой домен в список разрешенных доменов на странице настроек Font Awesome CDN.Чтобы настроить комплект, получите токен API на странице своей учетной записи Font Awesome.

Устранение неполадок с плагином
Иконки Font Awesome популярны, поэтому многие темы и плагины также загружают Font Awesome, и иногда их версия может конфликтовать с вашей. Поэтому мы создали способ помочь вам найти и предотвратить влияние этих конфликтующих версий на ваши значки: Сканер обнаружения конфликтов .

Если плагин настроен правильно, а значки все еще не загружаются, и вы не знаете, почему, перейдите на вкладку «Устранение неполадок», которая состоит из двух частей:

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

Получите дополнительную информацию об использовании сканера для устранения неполадок на странице WordPress в Font Awesome.

Настройка

Плагин по умолчанию настроен на обслуживание значков Font Awesome Free в качестве веб-шрифтов через Font Awesome CDN. Вы можете изменить настройки CDN прямо в плагине.В простейшем случае дополнительной настройки не требуется.

Примечание. В настоящее время плагин несовместим с мультисайтами WordPress.

Вы можете получить более подробную информацию обо всех доступных настройках и устранении неполадок на странице WordPress в Font Awesome.

Обновление старых версий

Если вы использовали старый плагин или все еще используете версию 3 Font Awesome, мы постарались упростить для вас процесс обновления, сохранив совместимость шорткода [icon] для имен Font Awesome 3, используемых со старым плагином.Но мы планируем в ближайшее время убрать из этого плагина поддержку именования версии 3, так что не ждите слишком долго, чтобы обновить свой код!

См. Также

README на GitHub, в котором есть подробная информация для владельцев и разработчиков сайтов WordPress.

Документация по API для разработчиков.

React Icon Component — Material-UI

Рекомендации и предложения по использованию значков с Material-UI.

Material-UI обеспечивает поддержку значков тремя способами:

1. Значки стандартизированного дизайна материалов, экспортированные как компоненты React (значки SVG).
2. С компонентом SvgIcon, оболочкой React для пользовательских значков SVG.
3. С компонентом Icon, оболочкой React для пользовательских значков шрифтов.

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

Дизайн материалов стандартизировал более 1100 официальных значков, каждая из которых представлена ​​в пяти различных «темах» (см. Ниже). Для каждого значка SVG мы экспортируем соответствующий компонент React из пакета @ material-ui / icons. Вы можете выполнить поиск по всему списку этих значков.

Установка

Установите пакет в каталог проекта с помощью:

 
npm install @ material-ui / icons


пряжа добавить @ material-ui / icons  

Эти компоненты используют компонент SvgIcon Material-UI для рендеринга пути SVG для каждого значка, поэтому они имеют одноранговую зависимость от следующего выпуска Material-UI.

Если вы еще не используете Material-UI в своем проекте, вы можете добавить его с помощью:

 
npm install @ material-ui / core


пряжа добавить @ material-ui / core  

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

Импортируйте значки с помощью одного из следующих двух вариантов:

• Вариант 1:

    импортировать AccessAlarmIcon из '@ material-ui / icons / AccessAlarm';
  импортировать ThreeDRotation из '@ material-ui / icons / ThreeDRotation';  

• Вариант 2:

    импорт {AccessAlarm, ThreeDRotation} из '@ material-ui / icons';  

Самый безопасный вариант — это вариант 1, но вариант 2 может обеспечить максимальное удобство для разработчиков.Прежде чем использовать второй подход, убедитесь, что вы следуете руководству по уменьшению размера пакета. Приветствуется настройка плагина Babel.

У каждого значка также есть «тема»: заливка (по умолчанию), контурная, закругленная, двухцветная и резкая. Если вы хотите импортировать компонент значка с темой, отличной от темы по умолчанию, добавьте имя темы к имени значка. Например, @ material-ui / icons / Удалить значок с помощью:

• Залитая тема (по умолчанию) экспортируется как @ material-ui / icons / Delete ,
• Обрисованная тема экспортируется как @ material-ui / icons / DeleteOutlined ,
Тема
• Rounded экспортируется как @ material-ui / icons / DeleteRounded ,
• Тема Twotone экспортируется как @ material-ui / icons / DeleteTwoTone ,
Тема
• Sharp экспортируется как @ material-ui / icons / DeleteSharp .

Примечание. Спецификация Material Design называет значки, используя имя «snake_case» (например, delete_forever , add_a_photo ), в то время как @ material-ui / icons экспортирует соответствующие значки с использованием именования «PascalCase» (например, DeleteForever , AddAPhoto ). Из этого правила именования есть три исключения: 3d_rotation экспортировано как ThreeDRotation , 4k экспортировано как FourK и 360 экспортировано как ThreeSixty .

SvgIcon

Если вам нужен пользовательский значок SVG (недоступный в наборе значков материалов по умолчанию), вы можете использовать оболочку SvgIcon . Этот компонент расширяет собственный element:

• Поставляется со встроенным доступом.
Элементы SVG
• должны быть масштабированы для области просмотра 24×24 пикселей, чтобы полученный значок можно было использовать как есть или включить в качестве дочернего элемента для других компонентов пользовательского интерфейса материала, которые используют значки. (Это можно настроить с помощью атрибута viewBox ).
• По умолчанию компонент наследует текущий цвет. При желании вы можете применить один из цветов темы, используя свойство color prop.

  функция HomeIcon (реквизит) {
  возвращаться (
    
      
    
  );
}  

Цвет

Свойство компонента

Вы можете использовать оболочку SvgIcon , даже если ваши значки сохранены в .svg формат. svgr имеет загрузчики для импорта файлов SVG и использования их в качестве компонентов React. Например, с webpack:

 
{
  тест: /\.svg$/,
  используйте: ['@ svgr / webpack'],
}


импортировать StarIcon из './star.svg';

  

Также возможно использовать его с «url-loader» или «file-loader». Это подход, используемый приложением Create React.

 
{
  тест: /\.svg$/,
  используйте: ['@ svgr / webpack', 'url-loader'],
}


импортировать {ReactComponent as StarIcon} из './star.svg ';

  

Библиотеки

Материальный дизайн (рекомендуется)

Материальный дизайн стандартизировал более 1100 официальных иконок.

MDI

materialdesignicons.com предоставляет более 2000 иконок. Для нужного значка скопируйте путь SVG , который они предоставляют, и используйте его как дочерний элемент компонента SvgIcon .

Примечание. Mdi-material-ui уже обернул каждый из этих значков SVG компонентом SvgIcon , поэтому вам не нужно делать это самостоятельно.

Значок (значки шрифтов)

Компонент Значок будет отображать значок любого шрифта значка, который поддерживает лигатуры. В качестве предварительного условия вы должны включить один, например Шрифт значка материала в вашем проекте, например, через Google Web Fonts:

Значок установит правильное имя класса для шрифта значка материала. Для других шрифтов необходимо указать имя класса с использованием свойства className компонента Icon.

Чтобы использовать значок, просто оберните имя значка (лигатура шрифта) компонентом Icon , например:

  импортировать иконку из '@ material-ui / core / Icon';

 звезда   

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

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

add_circleadd_circleadd_circleadd_circleadd_circleadd_circle

   add_circle 
 add_circle 
 add_circle 
 add_circle 
 add_circle 
 add_circle   

Font Awesome

Font Awesome можно использовать с компонентом Icon следующим образом:

  <Значок className = "fa fa-plus-circle" />
<Значок className = "fa fa-plus-circle" color = "primary" />
<Значок className = "fa fa-plus-circle" color = "secondary" />

<Значок className = "fa fa-plus-circle" fontSize = "small" />
  

Шрифт против SVG.Какой подход использовать?

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

Для получения дополнительной информации вы можете узнать, почему GitHub перешел с значков шрифтов на значки SVG.

Доступность

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

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

Декоративные значки SVG

Если ваши значки чисто декоративные, вы уже сделали! Атрибут aria-hidden = true добавлен, чтобы ваши значки были правильно доступны (невидимы).

Семантические значки SVG

Если ваш значок имеет семантическое значение, все, что вам нужно сделать, это добавить свойство titleAccess = "означающее" . Добавлены атрибут role = "img" и элемент