Значок — это символ, который используется для обозначения определенного действия или возможности на веб-странице. Иконки используются в документах, а также в приложениях, и они могут быть как выбираемыми, так и не выбираемыми. Например, все изображения, которые мы видим на кнопках приложения, представляют собой значки, и эти кнопки можно выбирать. Точно так же, когда мы используем значок в качестве логотипа компании, его обычно нельзя выбрать.
В среде Windows, если мы отключим системный том, он будет представлен с помощью значка, как показано ниже.
Используя веб-значки, мы можем представить загрузочную страницу, отключенную опцию, ссылку, перенаправление и т. Д. Эти значки можно перевернуть, повернуть, изменить размер, ограничить, перевернуть и раскрасить.
Иконочные шрифты
Иконочные шрифты содержат символы и глифы. Как только вы загрузите нужный шрифт, вы можете использовать любой из значков, предоставленных этим шрифтом, используя имя класса значка. Мы также можем применять различные цвета к значкам и изменять их размер, используя свойства CSS. Существует несколько библиотек значков (шрифтов), которые предоставляют значки. Этот урок фокусируется на трех основных шрифтах, а именно —
- Font Awesome
- Бутстрап Глификоны
- Значки материалов Google
Font Awesome
Этот шрифт предоставляет 519 бесплатных масштабируемых векторных иконок. Эта библиотека абсолютно бесплатна как для личного, так и для коммерческого использования. Эти значки можно легко настроить. Первоначально они были разработаны для Bootstrap.
Бутстрап Глификоны
Это библиотека монохромных иконок, доступных в растровых форматах, векторных форматах и в виде шрифтов. Он обеспечивает более 250 символов в формате шрифта. Вы можете использовать эти шрифты в своих веб-проектах. Эти значки не являются бесплатными, однако вы можете использовать их в проектах на основе Bootstrap без необходимости их покупки.
Значки материалов Google
Google предоставляет около 750 значков, разработанных в соответствии с «правилами, разработанными для материалов», и они называются значками Material Design . Эти значки просты и поддерживают все современные веб-браузеры. Поскольку эти значки являются векторными, они также масштабируемы. Чтобы использовать эти иконки, мы должны загрузить шрифт (библиотеку) материала-иконки .