Иконка создание сайтов: Иконки веб-разработка

Содержание

Использование наборов бесплатных иконок на сайте

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

Большинство наборов содержат разбивку по категориям. Вы можете найти логотипы социальных сетей, платежных систем, CMS и именитых мировых компаний, например таких как: Apple, Android, Windows и множество других.

Библиотеки содержат иконки в различных форматах, что позволяет более тонко подойти к Вашим нуждам:

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

Вы можете сами выбрать какой формат использовать. Например SVG-формат. Некоторые коллекции уже встроены в такие фреймворки как Bootstrap, Foundation и другие.

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

Вы скачиваете с сайта разработчика архив, содержащий необходимые материалы, и подключаете скачанные файлы, в одном из документов сайта, с помощью html, например:
<link rel=»stylesheet» href=»/css/mfglabs_iconset.css»>

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

<link rel=»stylesheet» href=»//maxcdn. bootstrapcdn.com/elusive-icons/2.0.0/css/elusive-icons.min.css»>

Этот способ имеет свои преимущества. Для хранения и передачи файлов обычно используются CDN ( Content Delivery Network – сеть доставки контента) и даёт такие преимущества как:

снижение нагрузки на сервер → увеличение скорости загрузки страниц → увеличение и улучшение позиций сайта в поисковых системах;
определенная защита к DDoS атакам;
кэширование на удаленных серверах и выбор ближайшего к вам сервера, для передачи данных. Благодаря этому необходимые файлы быстро загружаются на Ваш сайт.

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

Для каждого набора существуют свои правила вывода необходимого материала на страницу. Мы рассмотрим на практике два основных способа использования:

1. Для Font Awesome необходимо вставить в нужном месте следующий код и получите результат:

Увеличение размера производиться с помощью добавления следующих классов: fa-2x, fa-3x, fa-4x и далее, по аналогии. В других подборках правила увеличения похожи, за исключением первых букв класса, которые обычно соответствуют аббревиатуре названия библиотеки иконок.

Так же в инструментарии Font Awesome присутствуют такие возможности как:

анимированые иконки;
рамка вокруг;
применение к спискам;
поворот;
наложение;
настраивыемый CSS.

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

2. Для OPENICONIC существуют сразу три основных способа и два способа для использования в фреймворках. Рассмотрим только 3 основных:

подключение в виде обычного изображения:
<img src=»/open-iconic/svg/account-login.svg»>
подключение в виде SVG-спрайта:
<svg viewBox=»0 0 8 8″><use xlink:href=»#account-login»></use></svg>
использование обычного inine-элемента с CSS-классом:
<span data-glyph=»account-login»></span>

Бесплатные библиотеки иконок для сайта

На большинстве сайтов можно произвести поиск по набору, используя английские названия необходимых вам иконок (например: search или loop – иконка лупы, используемая для поиска на Вашем сайте).

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

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

Font Awesome (fontawesome.io) — один из самых популярных и всеобъемлющих наборов — 675 шт.
Foundation Icon Fonts 3 (zurb.com/playground/foundation-icon-fonts-3) — набор относящийся к Front-end фрэймворку Foundation — 283 шт.
Elusive Icons (elusiveicons.com) — 304 шт.
MFG Labs Icon set (hmfglabs.github.io/mfglabs-iconset/) — 260 шт.
OPENICONIC (useiconic.com/open) — 223 шт.
GLYPH (glyph.smarticons.co) — используется в Front-end фреймворке Bootstrap — 800 шт.
IKONS (ikons.piotrkwiatkowski.co.uk) — 300 шт.
Dripicons (demo.amitjakhu.com/dripicons) – 500 шт.
Ionicons (ionicons.com) — 617 шт.

Material icons (material. io/icons) — 900 шт.
Entypo+ (entypo.com) — 411 шт.
Icons8 (icons8.com) — 62,300 шт.
Freepic (ru.freepik.com/free-icons) — 99,458 шт.
Flaticon (flaticon.com) — 632,500 шт.
IcoMoon (icomoon.io) — 550 шт.

Список составлен без какого-либо отношения к популярности или практичности библиотеки. Нет какого-либо разграничения и каждый найдёт свои прекрасные иконки, подходящие для реализации его цели.

Tilde Computer Icons Widget Создание сайтов, тильда, угол, текст, черный белый png

угол,
текст,
черный белый,
другие,
обои для рабочего стола,
компьютерное программирование,
оправа,
адрес электронной почты,
тильда,
веб-сайт Builder,
символ,
линия,
HTML,
электронная почта,
значки компьютеров,
круг,
черный и белый,
виджет,
png,
прозрачный,
бесплатная загрузка

Об этом PNG

Размер изображения: 1680x1783px
Размер файла: 360. 16KB
MIME тип: Image/png

Скачать PNG ( 360.16KB )

изменить размер PNG

ширина(px)

высота(px)

Лицензия

Некоммерческое использование, DMCA Contact Us

Компьютерные иконки Email Desktop, электронная почта, разное, угол, треугольник png 980x984px 71KB
Иконки компьютеров AOL Mail Адрес электронной почты Веб-почта, электронная почта, разное, угол, треугольник png 512x512px 12.81KB
Адрес электронной почты Компьютерные иконки, почта, разное, угол, треугольник png 980x984px 71.39KB
org/ImageObject»> Компьютерные иконки Email Symbol, электронная почта, разное, угол, логотип png 1000x1000px 14.07KB
Значки компьютеров адрес электронной почты адрес электронной почты, адрес, Разное, текст, мобильные телефоны png 1600x1600px 70.69KB
черный логотип WhatsApp, WhatsApp значки компьютеров, WhatsApp, логотип, монохромный, черный png 512x512px 24.25KB

Компьютерные иконки, сайт, веб-дизайн, логотип, серый png 2400x2400px 93.44KB
Email Logo Icon, Email, черный конверт с логотипом, Разное, текст, мобильные телефоны png 500x500px 11.73KB
org/ImageObject»> черно-белый логотип электронной почты, электронная почта иконки компьютеров дизайн иконок, электронная почта, Разное, угол, треугольник png 1000x1000px 47.54KB
Телефон Компьютерные иконки, Facebook адрес электронной почты WhatsApp адрес телефона Instagram IC, разное, текст, другие png 600x600px 28.8KB

Логотип WhatsApp, значки компьютеров WhatsApp, WhatsApp, текст, андроид, символ png 512x512px 9.23KB
Электронная почта Иконки компьютера, Электронная почта значок Best, белый конверт illustrationb, разное, угол, треугольник png 600x600px 24.8KB
Значок веб-сайта электронной почты, электронная почта, разное, угол, текст png 512x512px 19. 97KB
Email маркетинг Компьютерные иконки Адрес электронной почты, электронная почта, Разное, текст, прямоугольник png 512x512px 31.18KB

Телефонный звонок Компьютерные иконки Символ, значок телефона, Разное, логотип, монохромный png 512x512px 7.49KB
Электронная почта, электронная почта, разное, угол, текст png 1969x1406px 35.35KB
значок телефона, телефонный звонок компьютер иконки iPhone Symbol, TELEFONO, электроника, оправа, мобильные телефоны png 980x980px 69.06KB
Иконка электронная почта, электронная почта, разное, угол, текст png 960x685px 20. 92KB
логотип сообщения, Yahoo!Почта Адрес электронной почты Веб-почта, значок электронной почты, Разное, угол, треугольник png 980x980px 41.89KB
черный логотип Gmail, электронная почта Gmail Computer Icons, электронная почта Gmail, cdr, угол, текст png 512x512px 4.93KB
Адрес Компьютер Иконки, значок карты, разное, угол, сердце png 1969x3512px 100.18KB
Расположение значков компьютеров, значок местоположения, значок местоположения на карте, Разное, другие, обои для рабочего стола png 686x980px 42.54KB
Дестелло, Брильос, синий, угол, текст png 700x700px 51. 87KB
Компьютерная Иконка Веб-страница, личность, угол, текст, логотип png 1600x1600px 70.36KB
Иконки электронной почты компьютера Gmail, электронная почта, разное, угол, треугольник png 980x984px 71.53KB
Рисование стрелки, петли стрелки, угол, лист, текст png 670x702px 16.4KB
белый телефон логотип, значки компьютеров телефон мобильные телефоны, номер телефона, Разное, текст, телефонный звонок png 980x980px 75.5KB
Логотип веб-разработки, веб-сайт, веб-дизайн, симметрия, интернет png 2000x2000px 121.91KB
org/ImageObject»> Иконки YouTube для компьютеров, YouTube, угол, прямоугольник, черный png 1000x1000px 16.98KB
белый и синий значок сообщения иллюстрации, электронная почта Иконки компьютера Входящие сообщения Gmail, ENVELOPE, Разное, синий, угол png 512x512px 19.27KB
Instagram логотип иллюстрации, Snitz Creek Brewery Logo Компьютерные иконки, Ig, Разное, текст, другие png 748x561px 283.97KB
Telegram Computer Icons Desktop, значок с логотипом, разное, угол, текст png 1024x1024px 13.96KB
телефон логотип, телефонный звонок компьютерные иконки символ, телефон, Разное, CDR, текст png 914x980px 33.57KB
org/ImageObject»> обмен сообщениями логотип, адрес электронной почты Электронная рассылка Логотип Интернет, гофрированная лента, Разное, синий, угол png 940x940px 45.81KB
Хромакей Галочка Tilde Symbol, зеленая галочка, зеленая галочка, разное, угол, лист png 600x510px 8.33KB
Логотип Instagram, логотип Computer Computer Icons, логотип INSTAGRAM, Разное, белый, текст png 1224x792px 22.92KB
Компьютерные иконки Интернет веб-страница, всемирная паутина, текст, глобус, логотип png 980x980px 60.75KB
Computer Icons Email Электронная рассылка, электронная почта, Разное, логотип, черный и белый png 980x980px 39.02KB
org/ImageObject»> иллюстрации электронной почты, значки компьютеров Gmail Электронная почта Google Symbol, gmail, угол, прямоугольник, треугольник png 512x512px 5.69KB
Иконки электронной почты компьютера, электронная почта, разное, угол, белый png 768x768px 110.49KB
Компьютерные иконки, значок сайта, текст, глобус, другие png 980x980px 67.11KB
иллюстрация белой стрелки, значки настольного компьютера зеленой стрелки, изогнутая вправо белая стрелка, разное, угол, треугольник png 600x420px 45.71KB
логотип конверта, иконки электронной почты компьютера, значок электронной почты, разное, синий, угол png 1024x1024px 76.32KB
org/ImageObject»> Иконки компьютера Адрес электронной почты Значок «Поделиться», электронная почта, разное, угол, прямоугольник png 768x768px 7.94KB
почта, значки компьютеров электронная почта, электронная почта, Разное, угол, прямоугольник png 1000x1000px 103.14KB
Черная звезда, трехмерные звезды, угол, треугольник, симметрия png 630x599px 12.26KB
Адресная книга Computer Icons Font Awesome, значок контакта, текст, логотип, веб-шаблон png 1600x1600px 24.9KB
Компьютерные иконки Веб-страница Интернет, Глобал, веб-дизайн, текст, логотип png 1000x1000px 43.17KB