Веб-разработчики очень часто используют значки для представления определенного действия, или значок может графически представлять любую команду, действие или индикатор на веб-странице. Значки используются в документах, а также в приложениях и могут быть выбираемыми или не выбираемыми.
Например, все изображения, которые мы видим на кнопках приложения, представляют собой значки, и эти кнопки можно выбирать.
Для облегчения проектирования и программирования веб-сайтов были разработаны некоторые библиотеки значков шрифтов, то есть значки, которые можно вставлять, как если бы они были текстовыми, и доступны для использования на HTML-страницах веб-сайта, что экономит много работы для дизайнеры и программисты.
В этом уроке мы увидим некоторые библиотеки, такие как Font Awesome, Bootstrap Glyphicons и Google Material Design, которые являются библиотеками с предустановленными шрифтами значков, часто используемыми веб-разработчиками.
Font Awesome Инструменты и Библиотека
Font Awesome - это библиотека шрифтов, которая представляет значки с использованием набора инструментов на основе CSS. Этот инструмент разработан для использования с Twitter Bootstrap, но может использоваться отдельно в качестве таблиц стилей на любом веб-сайте.
Преимущество библиотеки CSS заключается в том, что она работает на любом браузере и устройстве и даже адаптируется к любому разрешению экрана.
Вы можете скачать библиотеку с сайта Font Awesome. Другой вариант - использовать прямую ссылку на библиотеку:
Давайте посмотрим, как реализовать иконки для социальных сетей с помощью Font Awesome, создать HTML-файл и добавить следующий код:Font Awesome - иконки социальных сетейFont Awesome - иконки социальных сетей
HTML-код ex
Каждый значок представлен классом fa-icon, поэтому, например, значок YouTube будет fa-youtube, а результат при отображении в браузере будет следующим:
Затем мы можем добавить наши собственные классы CSS или изменить предопределенные классы для адаптации к нашему дизайну, например, среди тегов head мы добавляем следующий код CSS.
body {background: # 000; семейство шрифтов: «Arial», без засечек; размер шрифта: 100%; поле: 0; отступы: 0; } h1 {text-align: center; цвет: #fff; фон: rgba (0, 0, 0, 0.36); поле: 0; обивка: 5px; } .list-unstyled {padding-left: 0; стиль списка: нет; } .list-inline li {display: inline-block; отступ справа: 5 пикселей; отступ слева: 5 пикселей; нижнее поле: 10 пикселей; } / * Изменить шрифт или размер шрифта * / .social-icons .fa {font-size: 2em; } / * Здесь можно изменить размер и цвет круга значков * / .social-icons .fa {width: 50px; высота: 50 пикселей; высота строки: 50 пикселей; выравнивание текста: по центру; цвет: #FFF; цвет: rgba (255, 255, 255, 0, 8); -webkit-transition: все 0.3s easy-in-out; -моз-переход: все 0.3s easy-in-out; -ms-переход: все 0.3 с легкостью входа-выхода; -переход: все 0, 3 с легкостью входа-выхода; переход: все 0.3 с легкостью входа-выхода; } .social-icons.icon-circle .fa {border-radius: 50%; } .social-icons.icon-округлен .fa {border-radius: 5px; } .social-icons.icon-flat .fa {border-radius: 0; } .social-icons .fa: hover, .social-icons .fa: active {цвет: #FFF; -webkit-box-shadow: 1px 1px 3px # 333; -moz-box-shadow: 1px 1px 3px # 333; тень от коробки: 1px 1px 3px # 333; } .social-icons.icon-zoom .fa: hover, .social-icons.icon-zoom .fa: active {-webkit-transform: scale (1.1); -моз-преобразование: масштаб (1.1); -ms-преобразование: масштаб (1.1); -опреобразование: масштаб (1.1); преобразование: масштаб (1.1); } .social-icons.icon-rotate .fa: hover, .social-icons.icon-rotate .fa: active {-webkit-transform: scale (1.1) rotate (360deg); -moz-transform: масштаб (1.1), поворот (360 градусов); -ms-transform: масштаб (1.1) повернуть (360 градусов); -опреобразование: масштаб (1.1) повернуть (360 градусов); трансформировать: масштаб (1.1) повернуть (360 градусов); } .social-icons .fa-apple {background-color: # aeb5c5;} .social-icons .fa-android {background-color: # A5C63B;} .social-icons .fa-bitcoin {фон-цвет: # F7931A ;} .social-icons .fa-css3 {background-color: # 1572B7;} .social-icons .fa-dropbox {background-color: # 018BD3;} .social-icons .fa-facebook, .social-icons. fa-facebook-square {background-color: # 3C599F;} .social-icons .fa-github, .social-icons .fa-github-alt, .social-icons .fa-github-square {background-color: # 070709;} .social-icons .fa-google-plus, .social-icons .fa-google-plus-square {background-color: # CF3D2E;} .social-icons .fa-html5 {фон-цвет: # E54D26 ;} .social-icons .fa-instagram {background-color: # A1755C;} .social-icons .fa-linkedin, .social-icons .fa-linkedin-square {background-color: # 0085AE;} .social- icons .fa-linux {background-color: # FBC002; цвет: # 333;} .social-icons .fa-maxcdn {background-color: # F6AE1C;} .social-icons .fa-pagelines {background-color: # 241E20; цвет: # 3984EA;} .social-icons .fa-pinterest, .social-icons .fa-pinterest-square {bac kground-color: # CC2127;} .social-icons .fa-renren {background-color: # 025DAC;} .social-icons .fa-skype {background-color: # 01AEF2;} .social-icons .fa-stack -exchange {background-color: # 245590;} .social-icons .fa-stack-overflow {background-color: # FF7300;} .social-icons .fa-trello {background-color: # 265A7F;} .social- icons .fa-tumblr, .social-icons .fa-tumblr-square {background-color: # 314E6C;} .social-icons .fa-twitter, .social-icons .fa-twitter-square {background-color: # 32CCFE;} .social-icons .fa-vimeo-square {background-color: # 229ACC;} .social-icons .fa-vk {background-color: # 375474;} .social-icons .fa-weibo {background- цвет: # D72B2B;} .social-icons .fa-windows {background-color: # 12B6F3;} .social-icons .fa-xing, .social-icons .fa-xing-square {background-color: # 00555C; } .social-icons .fa-youtube, .social-icons .fa-youtube-play, .social-icons .fa-youtube-square {background-color: # C52F30;} Оформление иконок с помощью CSSЗатем мы запускаем в браузере, и результат будет следующим:
Мы видим, что мы применили CSS к каждой иконке и не добавили ни одного изображения. Другим вариантом улучшения видимости является изменение класса наведения, то есть, когда мышь находится над значком, измените цвет буквы.
Для этого мы изменим цвет в следующей строке:
.social-icons .fa: hover {цвет: зеленый; } Результат при наведении курсора на значок будет следующим:
Мы также можем сделать это с фоном каждого значка, изменив свойство фона на цвет, который нам нравится.
Все доступные иконки можно увидеть на сайте Font Awesome, иконки организованы по категориям.
Использование этого типа источника иконок для нашего веб-дизайна позволяет нам ускорить загрузку страницы, поскольку нам не нужны изображения и мы предлагаем превосходное качество (особенно в мобильных устройствах при масштабировании).
Glyphicons Bootstrap Инструменты и библиотека
Glyphicons Bootstrap - это библиотека значков шрифтов . Он предлагает широкий выбор иконок в формате шрифта. Эти значки бесплатны, и вы также можете расширить библиотеку с помощью значков платежей. Бесплатные иконки можно использовать в проектах, основанных на веб-дизайне, без необходимости их покупать. Эта библиотека ориентирована на значки для кнопок, которые выполняют некоторые функции, такие как печать, поиск, сохранение и т. Д.
Эта библиотека включена в Bootstrap как таблицы стилей, для ее использования мы можем скачать Bootstrap с ее официального сайта или воспользоваться следующей ссылкой:
Мы также можем увидеть иконки по категориям на странице Glyphicons.$config[ads_text5] not foundВот пример, в котором мы используем эту библиотеку для иконок для кнопок и элементов ввода данных для формы:
Glyphicon Bootstrap - кнопкиGlyphicon Bootstrap - кнопки
Поиск Распечатать Войти КупитьМы применяем готовый значок для выбора
Мотоциклы Автомобили
Преимущества использования значков шрифтов или исходных значков состоят в том, что вы избавляете от необходимости вызывать изображение или значок, поскольку изображения имеют формат svg в файле css библиотеки, и эти изображения являются масштабируемыми.
$config[ads_text6] not foundПолная библиотека может весить от 10 до 40 КБ, что увеличивает скорость загрузки сайта.
$config[ads_text5] not found
Значки являются текстовыми, поэтому мы можем манипулировать ими с помощью CSS, и он будет реагировать на любое событие, которое мы программируем с помощью Jquery.Если в свойстве CSS Font мы, например, указываем размер шрифта в em, font-size: 4em, значок будет адаптивным и адаптируется к любому устройству. Их также можно использовать для программирования реагирующих приложений с помощью фреймворков, как показано в руководстве по программированию мобильных приложений с помощью Ionic Framework, эти значки также используются.
- 0
СТАТЬИ