30+ лучших бесплатных иконок социальных сетей для Вашего веб-сайта

Иконки соц. сетей для сайта

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

Другой вопрос подходят ли они по стилю для вашего сайта, не отвлекают ли от контента? А сами то Вы как думаете, когда видите красно-сине-зеленые ляпистые кнопки, одинаковые на всех сайтах, как в инкубаторе.

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

Иконочный шрифт Font Awesome

как нельзя кстати хорошо подходит для создания иконок соц. сетей на сайте. Давайте рассмотрим все преимущества:

  • легкость внедрения в проект
  • масштабируются без потери качества
  • не создают http-запросов к серверу
  • большой выбор векторных иконок
  • легко стилизовать под свой дизайн

Сделаем HTML разметку

Создадим контейнер div с классом box, внутри которого поместим пять пунктов списка ul. В каждый пункт списка li поместим блок dlv с классом icon, внутри которых теги i с классами нужных вам иконок.

На сайте fontawesome.com, находим нужные иконки и копируем код в свой HTML-файл.

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

Иконки соц. сетей появились на странице, теперь предстоит их стилизация.

CSS-код

Разместим иконки в центре, для этого пропишем контейнеру с классом box код ниже.

.box <
text-align: center;

Убираем у списков ul маркеры и задаем отступ сверху 60 пикселей.

.box ul <
list-style: none;
margin-top: 60px;
>

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

.box ul li <
width: 40px;
height: 40px;
background: #fff;
border: solid 4px #ea86c6;
>

Отобразим список в строку: display: inline-block;

На картинке иконки стоят не по центру, маленького размера и неправильного цвета.

Работа с классом icon

Опускаем иконки на 15% вниз:

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

color: #ea86c6;
font-size: 1.7em;

Можно было бы на этом остановиться, но тогда зачем мы делали рамку у пунктов списка?

Hover эффект для иконок

Создадим hover эффект, при котором при наведении курсора, у рамок меняться цвет.

.box ul li:hover <
border: solid 4px #b63a64;
>

У иконок изменится цвет и увеличится размер:

.box ul li:hover .icon <
font-size: 1.5em;
color: #b63a64;
>

Демонстрация hover эффекта

Плавность hover эффекта достигается свойству transition. На codepen вы можете посмотреть, каким элементам это свойство задано.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2019 Русаков Михаил Юрьевич. Все права защищены.

    10 лучших веб-сайтов для генерации иконок


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

    Визуальный дизайн или дизайн пользовательского интерфейса – все это является главными аспектами тенденций в веб-дизайне. Вот почему особенности Google Material Design оказываются более эффективными при разработке пользовательского интерфейса для осуществления зрительной коммуникации с посетителем.

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

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

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

    Иконки широко используются в социальных сетях, на сайтах электронной коммерции, игровых ресурсах и многих других. Мы знаем такие популярные иконки как «Like» на Фейсбуке или «Shopping Cart» на сайте E-commerce. Но на самом деле существуют тысячи иконок, попадающие под различные категории. В веб-разработке значки часто используются для перечисления чего-либо на странице, кнопок социальных сетей, таких важных разделов, как «Связаться с нами» и других.

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

    Этот онлайн инструмент позволяет вам создавать красивые иконки для e-mail прямо с вашей электронной почты. Инструмент генерирует иконки для различных поставщиков услуг электронной почты, таких как Gmail, Yahoo!, MSN, Hotmail и многих других.

    MakeAppicon является надежным онлайн-инструмент генерации иконок для приложений iOS и Android. Инструмент позволяет изменять размер и оптимизировать ваши иконки под различные форматы и размеры, необходимые для iOS и Android.

    3) Iconion

    Инструмент позволяет не только создавать свои собственные иконки, но и стилизовать уже существующие в нужном вам направлении. Вы можете выбрать шрифты для символа на Font Awesome, Linecons или любого другого онлайн-источника. После загрузки вашего изображения в формате png, bmp, jpeg или ico, вы можете изменять изображение с помощью функций редактирования.

    Если вы поклонник персональных иконок, то IconizeMe станет для вас отличным инструментом, который раскачает ваш онлайн-мир. Персональные иконки выглядят очень уникальными в профилях социальных сетей или личных блогах.

    FavIcon Generator является идеальным онлайн-инструментом для генерации иконок из изображения для вашего сайта. Инструмент позволяет загружать файл изображения, после чего выбрать выходной формат из различных вариантов, таких как gif, jpg, png и bmp. Сайт широко используется для брэндирования логотипа компании для посетителей онлайн.

    Этот инструмент позволяет загружать изображения в форматах GIF, JPEG или PNG, а затем преобразовать их в Windows favicon с расширением ICO. Помимо этого вы можете использовать инструмент с целью создания иконок для веб-сайтов, а также для приложений iOS, Microsoft и Android.

    Этот онлайн инструмент от Android Asset Studio предназначен для генерации веб-иконок для приложений Android. Вы можете создавать иконки из изображений, клипартов или текста. Кроме того, инструмент предлагает много возможностей выбрать цвета, формы, фоны и эффекты.

    Pic2Icon — это бесплатный генератор иконок, предлагающий массу возможностей применения различных эффектов к вашей иконке. Кроме того, он предлагает инструменты для преобразования формата иконок, а также генерацию иконок для Windows 7, Windows XP, iPhone и iPad.

    Онлайн-инструмент, позволяющий создавать иконки из различных графических форматов. Редактор так же позволяет создавать иконки из 3D моделей и рисовать иконки со слоями.

    Онлайн-место для создания 3D-иконок и логотипов. Инструмент позволит разработчикам веб и мобильных приложений создавать социальные иконки 3D и логотипы для популярных сайтов, брендов, продуктов программного обеспечения. Некоторые из них — Facebook, LinkedIn, Instagram, YouTube, GitHub, Google.

    Заключение

    Генераторы иконок являются важной категорией инструментов веб-дизайна. Используя эти инструменты, вы можете создавать иконки для различных категорий, таких как рестораны, транспорт, погода, социальные сети, игры, искусство и многое другое. Вы также можете создавать свои собственные 3D наборы иконок, которые можно использовать в различных контекстах.

    5 лучших онлайн редакторов иконок

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

    Подобные сайты редакторы иконок очень эффективны. Они позволяют вам:

    • легко и быстро создавать новые материалы;
    • придать существующим наработкам завершенный вид;
    • сохранять результат в разных форматах (SVG, ICO & PNG);
    • создавать иконки для favicons.

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

    IconsFlow

    IconsFlow.com — векторные иконки + редактор позволяющий создавать персонализированные наборы и экспортировать их в хорошем качестве (SVG, ICO & PNG). Главным преимуществом сервиса является наличие двух редакторов:

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

    Если вы уже создали иконки в Illustrator, просто загрузите файлы SVG и поэкспериментируйте с разными фонами. В IconsFlow существуют определенные ограничения при бесплатном использовании, поэтому убедитесь, что вы с ними ознакомились перед стартом. Для начинающих пользователей имеются уроки и раздел помощи, к тому же есть возможность работать в редакторе иконок на русском.

    Вид векторного редактора IconsFlow:

    FlatIcons

    С помощью FlatIcons.net вы можете создать свою флэт-иконку (в плоском стиле) на основе готовых шаблонов. Задавайте размеры, выбирайте рисунок и основной фон (круги, кольца, прямоугольники), меняйте цвет. Этот редактор иконок бесплатный, но у него есть два недостатка:

    • Во-первых, вы можете скачивать файлы только в PNG-формате.
    • Во-вторых, вам придется создавать каждый объект отдельно, т.к. невозможно разработать целый набор сразу.

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

    Launcher Icon Generator

    Проект Launcher Icon Generator бесплатный и, как мы думаем, больше подходит для продвинутых пользователей. Данный онлайн редактор иконок позволяет загружать изображения / клипарты и добавлять текст. Вы можете скачать по одной иконке за раз в 5 размерах (48 x 48; 72 x 72; 96 x 96; 144 x 144; 192 x 192).

    В качестве базового клипарта используется набор графики в стиле Material Design из GitHub. Сервис содержит такие настройки как: отступы, форма, цвет или прозрачность фона, масштабирование + дополнительные эффекты. Результат:

    Andro >

    Android Material Icon Generator — еще один инструмент создания флэт-иконок. Фишкой сервиса определенно является эффект в виде длинной тени. Если вам нужны подобные решения — этот редактор иконок будет идеальным вариантом.

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

    После скачивания в файле-архиве найдете 6 PNG разного размера и векторный файл SVG. В Illustrator иконка SVG будет размытой, но, к счастью, она хорошо смотрится в браузере. В итоге получается что-то вроде:

    Simunity

    Сайт Simunity – это генератор на базе HTML5, где можно создать иконку и затем скопировать код, чтобы отобразить ее в ваших веб-проектах. В качестве исходных материалов используются иконки из Font Awesome, для которых выбираются разные параметры: цвет, рамка, размер и стиль теней.

    Данный сервис пригодится, если вам необходимо быстро создать простые оригинальные иконки для сайта. Результат применения Simunity:

    Итого. Рассмотренные выше онлайн редакторы иконок – отличные инструменты для оптимизации работы дизайнеров. Нет смысла скачивать какие-то программы, когда все можно легко и быстро делать в сети. Из этой подборки, пожалуй, можно выделить IconsFlow. В нем собрано максимально большое число функций: галерея иконок, загрузка SVG, код для встраивания, предварительный просмотр, создание собственных шаблонов, экспорт PNG, ICO и SVG, адаптация размера, модные стили и встроенный векторный редактор. К тому же это единственный бесплатный редактор иконок на русском, если для вас это важно.

    Если знаете еще какие-то похожие сервисы, присылайте варианты в комментариях.

    4 сайта с бесплатными иконками

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

    Я собрал 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 рублей каждый месяц.

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

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

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

    Плагин иконок социальных сетей для WordPress

    Все мы знаем, что без социальных сетей никуда. И связать их со своим сайтом (в том или ином варианте) хочет любой блогер и почти каждый заказчик. Вот и я в очередной раз столкнулась с такой необходимостью. Но проблема заключается в том, что не все темы предусматривают кнопки социальных сетей, а уж русскоязычные социальные сети вообще не пользуются популярностью среди создателей тем для WordPress. Поэтому я стала искать плагин социальных кнопок для WordPress.

    Начну издалека. Я достаточно долго искала необходимый плагин. Не важно каким образом осуществлять поиск — через админку WP или же через Яндекс — основная масса плагинов решает только одну проблему, а именно реализацию функции «поделиться» с помощью социальных сетей. А это совсем не то, что меня интересовало. Моим заказчикам не нужны были кнопки «Поделиться», им это не интересно. Они хотели, чтобы на сайте были кнопки, по которым можно открыть их группу Вконтакте или Facebook. И это нормальное желание. Да, многие шаблоны изначально идут в комплекте с такой функцией. Но, во-первых, далеко не все, а во-вторых, каждый раз сталкиваешься с проблемой отсутствия иконок отечественных социальных сетей типа Вконтакте или Одноклассники. Да и в принципе зачастую идущие в комплекте с шаблоном иконки охватывают лишь некоторые социальные сети. И это неудобно.

    В общем мною были просмотрены килотонны информации, в том числе с иностранных сайтов. И в конце концов я нашла плагин Social Icons Widget by WPZOOM. Аналогов ему я не встречала, сколько ни искала — он действительно потрясающий и действительно очень удобный.

    Плагин Social Icons Widget by WPZOOM позволяет добавлять на ваш сайт практически любые иконки, причем не только относящиеся к социальным сетям. Давайте более подробно рассмотрим, что из себя представляет этот замечательный плагин.

    Установка

    Здесь всё как обычно — заходим в админку, переходим на страницу Плагины > Добавить новый, в поиск вставляем предварительно скопированное название интересующего нас плагина социальных кнопок, а именно Social Icons Widget by WPZOOM. Далее нажимаем Установить, а затем Активировать.

    Добавляем виджет

    После того, как плагин был активизирован, можно перейти в Внешний вид > Виджеты. Дальше всё будет зависит от используемой вами темы. В данном случае у меня базовая Twenty Seventeen, в которой предусмотрены 3 варианта размещения виджетов — sidebar (он же боковая колонка), подвал 1 и подвал 2.

    Как вы можете видеть — я уже добавила виджет социальных кнопок в подвал. Сейчас расскажу и покажу как (а там есть, что рассказать-показать).

    Первым делом в списке виджетов (который слева) находим наш плагин социальных кнопок Social Icons by WPZOOM. Нажимаем на него и получаем выпадающий список с перечнем блоков, в которых мы можем разместить эти кнопки. Как только определитесь — нажимайте кнопку Добавить виджет. После этого он появится в одном из блоков справа, а далее можно заняться внимательным изучением предлагаемых опций данного замечательного виджета, нажав на стрелочку справа от его названия.

    Настройка виджета

    Итак, первое, что нам предлагают — это написать заголовок (Title) для наших кнопок. Англоязычные сайты в основном пишут Follow us (Следите за нами), русским же сайтам больше свойственно просто писать Социальные сети или же вообще ничего не писать. Так что, если вы как раз из той категории людей, то можете просто стереть надпись по умолчанию.

    Далее у нас идёт Описание (Description) — короткое описание, которое будет выводится над иконками, можно использовать HTML. Если честно, у меня никогда не возникало необходимости выводить какой-либо текст над иконками, так что я обычно оставляю пустым это поле.

    Следующие два пункта как бы интересуются хотите ли вы показывать подписи к иконкам (Show icon labels?) и открывать ли ссылки в новых вкладках (Open links in new tab?). Первый пункт по умолчанию отключен, а второй как раз наоборот (что, в общем-то, и понятно). Если же поставить галочку рядом с пунктом «Show icon labels?», то под иконками ниже появятся поля с подписями, которые можно редактировать:

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

    Едем дальше. Стиль иконок (Icon Style). Тоже очень удобно — иконки можно сделать максимально приближенными по стилю к вашему сайту. Этот плагин социальных кнопок предлагает 2 варианта: цветной фон и белый значок или же цветной значок и прозрачный фон. Первый вариант лично я нахожу более интересным, так как в этом случае можно будет воспользоваться следующей опцией, а именно Стиль фона иконки (Icon Background Style). Здесь уже три варианта: скруглённые углы, круг или квадрат.

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

    После того, как вы определитесь с надписями, стилями и размерами, можно переходить к самим иконкам.

    Редактируем иконки

    По умолчанию в виджете есть иконки для Facebook, Twitter и Instagram. Можно их оставить, можно удалить, а можно отредактировать — как сами иконки, так и ссылку, на которую они ведут. Чтобы добавить новую иконку нужно нажать кнопку Add more (Добавить ещё). Под кнопкой мелким шрифтом написано, что для того, чтобы добавить иконку с адресом электронной почты, необходимо использовать формат mailto:mail@example.com .

    Итак, допустим вы решили удалить имеющиеся иконки и добавить те, которые вам нужны. Для начала нажимаем значок мусорного бака справа от каждого поля для ссылки, а затем нажимаем кнопку Add more.

    Дальше как вам удобнее — можно сразу добавить ссылку, а потом редактировать иконку, или же можно поступить наоборот. Ссылка в данной момент интересует меня меньше всего, поэтому я сразу нажму на значок «+» на месте иконки. После чего появится всплывающее окно с настройками иконки.

    Здесь можно выбрать цвет иконки, а также набор иконок, который будет удовлетворять вашим потребностям. Нам предлагают следующие наборы: Socicons, Dashicons, Genericons и даже Font Awesome. Когда дело касается социальных иконок, то лично я использую набор Socicons, так как в нём есть действительно большой выбор иконок разнообразных социальных сетей, таких как Одноклассники, Вконтакте, Facebook, 500px, Vimeo, Youtube, Behance, LinkedIn, Google+, Pinterest, а также значки Drupal, WordPress, Windows, Xbox, Wikipedia, Apple, Android и много других. В общем очень удобной набор.

    А так — выбирайте любой понравившийся набор или же комбинируйте все и наслаждайтесь.

    Выбрав цвет и иконку нажмите Save (Сохранить) и она появится в виджете. Потом опять нажмите кнопку Add more и повторяйте процедуру пока не добавите все нужные иконки. После чего важно не забыть нажать кнопку Сохранить на самом виджете и всё, иконки социальных сетей появятся на вашем сайте.

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

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

    MnogoBlog

    как создать сайт на wordpress, настроить и оптимизировать wordpress

    Красивые бесплатные иконки для сайта (+ иконки социальных сетей)

    Ниже представлены лучшие сеты иконок (+ иконки социальных сетей), с помощью которых вы сможете украсить свои сайты абсолютно бесплатно.

    Скачать исходники для статьи можно ниже

    Для использования ниже указанных иконок вам возможно понадобятся бесплатные программы для обработки векторной и растровой графики, которые вы сможете бесплатно скачать, прочитав предыдущую статью данного блога – Бесплатные программы для дизайнера (стартап студии веб-дизайна)

    Чтобы применить данные иконки к вашему сайту, рекомендуем вам также прочитать следующие статьи данного блога:
    – Иконки для категории
    – Иконки для виджетов
    – Иконки для сайта

    1. Строительные иконки

    Сет включает в себя 50 иконок на строительную тематику, выполненных на темно-синем фоне. Формат иконок PNG, ICO, ICONS

    Скачать можно здесь: “dryicons.com/free-icons/preview/architecture-blueprint-icons-set/”.

    2. Красивые плоские иконки от flattastic

    100 красивых иконок в формате PNG, SVG, EPS!

    Скачать можно здесь: “flattastic.com/”
    Чтобы скачать бесплатно – цену за них ставьте “0” (ноль долларов)!

    3. Игровые иконки

    Формат иконок “AI”

    Скачать можно здесь: “iconstore.co/icons/game-elements-icons/”

    4. Иконки Stylistica

    Более 100 уникальных иконок. Формат иконок PNG, ICO, ICONS

    Скачать можно здесь: “dryicons.com/free-icons/preview/stylistica-icons-set/”

    5. Красивые контурные иконки

    Формат иконок EPS.

    Скачать можно здесь:
    “dribbble.com/shots/1811264-Line-Icon-Set”
    “behance.net/gallery/20449387/FREE-LINE-ICONS”

    6. Зеленые контурные иконки

    Формат SVG, векторные и растровые форматы.

    Скачать можно здесь:

    7. Офисные иконки

    Формат иконок “AI”

    Скачать можно здесь:

    8. Простые контурные иконки

    Формат иконок PSD.

    Скачать можно здесь:
    “epicpxls.com/freebies/icons/simple-line-icons”

    9. Веб иконки

    Формат иконок EPS и AI.

    Скачать можно здесь:
    “vecteezy.com/vector-art/62888-web-icons”

    10. Красивые контурные иконки

    Формат иконок PSD и SVG.
    Скачать можно здесь:
    “mnogoblog.ru/wp-content/uploads/2016/01/84icons.zip”

    11. Ещё один красивый набор случайных иконок

    Формат иконок AI.
    Скачать можно здесь:
    “dribbble.com/shots/2316420-Random-Stuff-Iconset-vol-3”

    Иконки социальных сетей:

    1. Бутылочные иконки социальных сетей.

    Формат иконок PNG.
    Скачать можно здесь:
    “sargsyan.deviantart.com/art/Bulb-Social-Media-Icons-158858067”

    2. Деревянные иконки социальных сетей.

    Формат иконок PNG и PSD.
    Скачать можно здесь:
    “graphicsfuel.com/2013/09/24-wood-textured-social-media-icons/”

    3. Темно-серые иконки

    Формат иконок PNG и PSD.
    Скачать можно здесь:
    “wegraphics.net/downloads/free-dark-social-media-icons/”

    4. Симпатичные круглые иконки

    Формат иконок PNG и PSD.
    Скачать можно здесь:
    “graphicsfuel.com/2012/09/15-free-social-media-icons-psd-png/”

    5. Треугольные иконки социальных сетей.

    Формат иконок AI.
    Скачать иконки можно здесь:
    “vector4free.com/vector/free-triangle-vector-icons-set/”

    6. Прозрачные социальные иконки (только для темных фонов).

    Формат иконок PNG.
    Скачать иконки можно здесь:
    “designbolts.com/2013/09/23/40-free-transparent-social-media-icons-only-for-dark-backgrounds/”

    7. 3D иконки социальных сетей.

    Лучшие WordPress плагины для кнопок социальных сетей на 2016 год

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

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

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

    Easy Social Share Buttons

    Этот премиум плагин доступен на CodeCanyon.net за $19. Это один из самых универсальных плагинов подобного рода, благодаря одному простому факту — плагин позволяет размещать бар с кнопками для социальных сетей абсолютно в любом месте, где это может вам понадобиться.

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

    При помощи плагина можно добавлять плавающий бар иконок, размещать кнопки сверху/снизу поста, создавать статический или даже плавающий бар иконок для мобильной версии. Вы также сможете использовать триггеры, например, для добавления функций pop-up и fly-in.

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

    Monarch от Elegant Themes

    Monarch — это платный плагин для социальных сетей, который поставляется с тарифными планами Elegant Theme’s Developer и Lifetime Access. Данные планы включают в себя более 85 премиум тем для WordPress и все другие плагины от этого разработчика. К сожалению, политика компании такова, что вы не можете купить отдельно сам только плагин. Вы оплачиваете полный тарифный план и получаете доступ сразу ко всем премиум плагинам и темам разработчика.

    Monarch — это отзывчивый плагин, который позволит вам размещать эффектные плавающие бары по бокам поста или статические горизонтальные бары в начале/конце поста. Monarch предоставляет более 20 иконок для социальных сетей, есть image-sharing, pop-up и fly-in функции, а также множество настроек для оформления и дизайна.

    Social Warfare

    Social Warfare — интересный плагин от компании Warfare Plugins. Он не настолько универсален, как предыдущие два варианта, поскольку позволяет добавлять на сайт только плавающий бар, который прилипает к нижней части экрана. Но этот недостаток компенсируется замечательными ценовыми вариантами и огромным количеством других функций.

    Плагин предоставляет аналитику, возможность показывать количество репостов только после того, как постом поделится определенное количество людей, также есть более 75 различных вариантов для оформления. Можно использовать плагин для добавления функции click-to-tweet в ваши посты.

    Бесплатные плагины для социальных сетей

    Теперь давайте перейдем к нашему списку лучших бесплатных плагинов, на которые стоит обратить внимание в 2016 году.

    SumoMe Share

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

    SumoMe Share Pro поставляется с дополнительными функциями. Например, здесь есть возможность удалить брендинг SumoMe из вашего бара, можно отслеживать UTM-метки, чтобы узнать, какие социальные сети приносят наибольший трафик и т.д.

    GetSocial

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

    Разработчики представили и премиум версию плагина (с ежемесячной платой). В ней вы найдете функцию для добавления плавающего бара для мобильных версий и дополнительные варианты дизайна, есть функция click-to-tweet. В платной версии у вас также будет возможность убрать счетчик с кнопок, который отвечает за количество репостов.

    AddToAny Share Buttons

    AddToAny Share Buttons — это один из самых популярных WordPress плагинов для социальных сетей с более чем 200,000 активных установок. Этот плагин ставит простые плавающие бары по бокам вашего поста, а также в его начале или конце.

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

    Custom Share Buttons with Floating Sidebar

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

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

    Sharify Social Share Buttons

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

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

    Заключение

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

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

    А какими плагинами для социальных кнопок пользуетесь вы?

    Источник: wplift.com

    Насколько полезным был этот пост?

    Нажмите на звезду, чтобы оценить этот пост!

    Средний рейтинг: 5 / 5. Количество голосов: 7

    Ссылка на основную публикацию