Иконка поиск

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

В этом уроке вы узнаете, как создать разметку для поля поиска с помощью HTML5, а также как стилизовать элементы формы, используя возможности CSS3, без использования скриптов.

  • 1. Разметка HTML
  • 2. Поле поиска с кнопкой-иконкой
  • 3. Поле поиска с кнопкой внутри
  • 4. Поле поиска в стиле «flat»
  • 5. Поле поиска с толстой нижней границей
  • 6. Поле поиска с меняющимся цветом границы при фокусировке
  • 7. Выезжающее поле поиска
  • 8. Увеличивающееся в ширину поле поиска

See the Pen yaBZRk by Elena (@html5book) on CodePen.

Разметка HTML

<form action="" method="get"> <input name="s" placeholder="Искать здесь..." type="search"> <button type="submit">Поиск</button></form>

Элемент <form> является контейнером для формы поиска, поле поиска создается при помощи элемента <input type=»search»> или <input type=»text»>, а кнопка отправки данных на сервер может создаваться с помощью элемента <input type=»submit»> или <button type=»submit»>.

searchbox-structure

Чем отличается <input type=»search»> от <input type=»text»>? Оба этих поля создают однострочное текстовое поле для ввода текста, но type=»search» добавлено в стандарт HTML5 и является семантической подсказкой для браузеров. Все браузеры, кроме Mozilla Firefox, добавляют крестик очистки в поле. Чтобы его убрать, можно поменять тип поля на type=»text».

Чем отличается <input type=»submit»> от <button type=»submit»>? Разницы в действии кнопок отправки, созданных первым или вторым способом, нет. Отличие состоит в том, что элемент <button> является контейнером, следовательно внутрь него можно помещать другие элементы, например, изображения или иконки.

Текст в поля формы можно добавлять двумя способами:
1) <input type=»text» placeholder=»текст»>
Цвет отображаемого текста будет серого цвета. С помощью следующих правил можно задать тексту-подсказке любой цвет, поменять начертание и фон поля. Эти селекторы нельзя совмещать в одно правило, иначе они не будут работать.

input::-webkit-input-placeholder { color: #B6C0A5; font-style: italic; background: #E0EFCA;}input:-moz-placeholder { color: #B6C0A5; font-style: italic; background: #E0EFCA;}input:-ms-input-placeholder { color: #B6C0A5; font-style: italic; background: #E0EFCA;}

2) <input type=»text» value=»текст»>
Цвет отображаемого текста будет черного цвета. Задать свой цвет можно при помощи свойства color, например:

input { color: white;}

Для отображения иконок не забудьте подключить FontAwesome.

Поле поиска с кнопкой-иконкой

<form> <input type="text" placeholder="Искать здесь..."> <button type="submit"></button></form>
* {box-sizing: border-box;}form { position: relative; width: 300px; margin: 0 auto;}input { width: 100%; height: 42px; padding-left: 10px; border: 2px solid #7BA7AB; border-radius: 5px; outline: none; background: #F9F0DA; color: #9E9C9C;}button { position: absolute; top: 0; right: 0px; width: 42px; height: 42px; border: none; background: #7BA7AB; border-radius: 0 5px 5px 0; cursor: pointer;}button:before { content: "\f002"; font-family: FontAwesome; font-size: 16px; color: #F9F0DA;}

Поле поиска с кнопкой внутри

<form> <input type="text" placeholder="Искать здесь..."> <button type="submit"></button></form>
* {box-sizing: border-box;}form { position: relative; width: 300px; margin: 0 auto;}input, button { border: none; outline: none; border-radius: 3px;}input { width: 100%; height: 42px; background: #F9F0DA; padding-left: 15px;}button { height: 26px; width: 26px; position: absolute; top: 8px; right: 8px; background: #F15B42; cursor: pointer;}button:before { content: "\f105"; font-family: FontAwesome; color: #F9F0DA; font-size: 20px; font-weight: bold;}

Поле поиска в стиле «flat»

<form> <input type="text" placeholder="Искать здесь..."> <button type="submit"></button></form>
* {box-sizing: border-box;}form { position: relative; width: 300px; margin: 0 auto; background: #A3D0C3;}input, button { border: none; outline: none; background: transparent;}input { width: 100%; height: 42px; padding-left: 15px;}button { height: 42px; width: 42px; position: absolute; top: 0; right: 0; cursor: pointer;}button:before { content: "\f002"; font-family: FontAwesome; font-size: 16px; color: #F9F0DA;}

Поле поиска с толстой нижней границей

<form> <input type="text" placeholder="Искать здесь..."> <button type="submit"></button></form>
* {box-sizing: border-box;}form { position: relative; width: 300px; margin: 0 auto; background: #F9F0DA; border-bottom: 4px solid #be290e;}input, button { border: none; outline: none; background: transparent;}input { width: 100%; height: 42px; padding-left: 15px;}button { height: 42px; width: 42px; position: absolute; top: 0; right: 0; cursor: pointer;}button:before { content: "\f178"; font-family: FontAwesome; font-size: 20px; color: #be290e;}

Поле поиска с меняющимся цветом границы

<form> <input type="text" placeholder="Искать здесь..."> <button type="submit"></button></form>
* {box-sizing: border-box;}form { position: relative; width: 300px; margin: 0 auto;}input, button { outline: none; background: transparent;}input { width: 100%; height: 42px; padding-left: 15px; border: 3px solid #F9F0DA;}button { border: none; height: 42px; width: 42px; position: absolute; top: 0; right: 0; cursor: pointer;}button:before { content: "\f002"; font-family: FontAwesome; font-size: 16px; color: #F9F0DA;}input:focus { border-color: #311c24;}

Выезжающее поле поиска

Поле поиска появляется при нажатии на кнопку с иконкой.

<form> <input type="text" placeholder="Искать здесь..."> <button type="submit"></button></form>
* {box-sizing: border-box;}form { position: relative; width: 300px; margin: 0 auto; height: 42px;}input { height: 42px; width: 0; padding: 0 42px 0 15px; border: none; border-bottom: 2px solid transparent; outline: none; background: transparent; transition: .4s cubic-bezier(0, 0.8, 0, 1); position: absolute; top: 0; right: 0; z-index: 2;}input:focus { width: 300px; z-index: 1; border-bottom: 2px solid #F9F0DA;}button { background: #683B4D; border: none; height: 42px; width: 42px; position: absolute; top: 0; right: 0; cursor: pointer;}button:before { content: "\f002"; font-family: FontAwesome; font-size: 16px; color: #F9F0DA;}

Увеличивающееся в ширину поле поиска

<form> <input type="text" placeholder="Искать здесь..."> <button type="submit"></button></form>
* {box-sizing: border-box;}form { width: auto; float: right; margin-right: 30px;}input { width: 250px; height: 42px; padding-left: 15px; border-radius: 42px; border: 2px solid #324b4e; background: #F9F0DA; outline: none; position: relative; transition: .3s linear;}input:focus { width: 300px;}button { width: 42px; height: 42px; background: none; border: none; position: absolute; top: -2px; right: 0;}button:before{ content: "\f002"; font-family: FontAwesome; color: #324b4e;}
  • User Avatar Vasyl Holiney 29 мая, 2021
featured image

:
1.Где и как искать иконки?
2.Как найти иконку в Google
3.Как найти иконку при помощи Яндекса

Создаете логотип в logaster.ru, но не можете найти нужную иконку, картинку так как предложенные нами варианты вам не подходят?

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

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

Для этого нужно:
1. Создать логотип, используя для этого любую из предложенных Логастером иконок.
2. Скачать полученное в результате изображение.
3. Найти новую иконку по своему вкусу.
4. Заменить старую картинку в логотипе на новую.

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

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

Где и как искать иконки?

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

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

Как найти иконку в Google:

google icon

1. Выберите «Поиск по картинкам».
2. Напишите ключевые слова для поиска. Например, «собака» или «dog».
3. Уточните свой поисковый запрос, используя слова «иконка», «вектор», «клип-арт» и т. д.
4. Выберите «Инструменты поиска» — «Тип» — «Иллюстрация».

Как найти иконку при помощи Яндекса:

yandex icon search
yandex icon

1. Выберите «Поиск по картинкам».
2. Напишите ключевые слова для поиска.
3. Используйте фильтры (размер, ориентация, тип, цвет), отображенные на картинке ниже.
В итоге вы получаете перечень изображений, которые можете сохранять и использовать для своего логотипа.

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

Flaticon

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

Freepik

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

Find Icons

Find Icons

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

free_icons

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

icon_search

Очень много иконок разного качества, которые можно скачать в формате PNG и ICO. Преимуществом сервиса является русскоязычный интерфейс и возможность поиска картинок на русском языке.

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

Главное удобство использования этого сервиса — не нужно самостоятельно просматривать каталоги множества сайтов, чтобы купить картинку. Достаточно посетить iconsguide, где представлены самые разнообразные варианты.

После того как вы нашли нужную иконку (картинку) самое время заменить старую! О том, как это сделать, читайте в статье «Как заменить иконку в логотипе?»

Рубрики: How To

Школа веб-дизайна WDI
Школа веб-дизайна WDI

Follow

May 23, 2018 · 3 min read

За все в мире нужно платить, а иногда нет.

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

Icon8

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

Ограничения

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

  • Размер иконки — 100×100
  • Формат — PSD
  • Если в коммерческом проекте используете иконку, нужно поставить линк на сайт

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

Попросить

Если на сайте нет нужной иконки, ее можно попросить сделать. Заполняете заявку, отправляете на голосование. У них там демократия: побеждает иконка, которая наберет больше голосов. Но демократию можно обойти — заплатите 50 баксов и вам нарисуют все что захотите.

FlatIcon

На сайте 637 тысяч бесплатных иконок в высоком разрешении. Вводите в поисковой строке запрос и выбирайте.

Форматы: SVG, PNG, PSD, EPS.

Ограничения

  • 192 тысячи иконок останутся недоступными
  • Иконки нельзя использовать в коммерческих проектах. Но это никто не контролирует

Подписка стоит 620 рублей в месяц.

Noun Project

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

Форматы: PNG, SVG.

Ограничения

  • Иконки можно использовать в коммерческих проектах с указанием авторства

Снять ограничение можно месячной подпиской. Она стоит 620 рублей.

Icon Finder

На сайте 2,5 миллиона иконок. Icon Finder работает по аналогии с другими агрегаторами: вводите запрос в поисковую строку и выбираете иконку.

Форматы: SVG, PNG.

Ограничения

  • Премиум иконки останутся недоступными
  • Нельзя использовать иконки в коммерческих проектах, без указания автора

Подписка стоит 1240 рублей в месяц. Это доступ к пятидесяти премиум иконкам и лицензия на использование иконок. Если хотите качать премиум без ограничений, придется выкладывать 3 100 рублей каждый месяц.

Авторское право

Каждая иконка — это труд отдельного человека или команды. Использовать иконки в коммерческих проектах и не платить можно. Но так вы нарушаете авторское право.

Если своруете и владельцы захотят докопаться, вас легко засудят. Дойдет дело до суда или нет — дело случая. Я не знаю ни одного живого примера, когда дизайнер распинался перед судьей за то, что взял десять иконок с агрегатора и не указал авторство.

Адьйо, главред WDI

Роман Вотинцев

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *