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