Иконки соцсетей для сайта: Топ 50 бесплатных иконок социальных сетей

Содержание

Топ 50 бесплатных иконок социальных сетей

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

Спасибо большое http://speckyboy.com и взгляните на прошлые подборки:

Чёрно белые иконки социальных сетей

Скачать

Классные 24 иконки социальных сетей

Скачать

Круглые социальные иконки в формате Sketch

Скачать

Социальные медиа иконки в круглом виде

Скачать

80 социальных иконок — Picons

Скачать

Отличные иконки социальных сетей в минималистическом стиле

Скачать

Современные иконки социальных закладок

Скачать

Минималистические иконки

Скачать

24 иконки под названием — Drawic

Скачать

20 PSD иконок социальных сетей в стиле Flat

Скачать

60 различных Flat иконок социальных сетей

Скачать

Отличные социальные иконки разнообразных форматов

Скачать

Flat иконки в круглом и квадратном видах

Скачать

Отличные и круглые Flat иконки социальных сетей

Скачать

72 разнообразных социальных иконок

Скачать

Квадратные и социальные Flat иконки

Скачать

Отличные и бесплатные иконки в квадратном виде

Скачать

Социальные иконки в стиле Flat

Скачать

Отличные иконки социальных медиа в стиле Flat

Скачать

30 PSD иконок социальных сетей бесплатно

Скачать

Круглые и социальные иконки — Geekly

Скачать

42 PSD иконки социальных сетей с длинной тенью

Скачать

Квадратные социальные иконки с длинной тенью

Скачать

Круглые и минималистические социальные иконки

Скачать

Круглые и минималистические иконки в PNG формате

Скачать

Социальные иконки для сайта бесплатно

Скачать

Социальные иконки с тонкими линиями

Скачать

Круглые иконки социальных закладок

Скачать

48 классных социальных иконок бесплатно

Скачать

Социальные иконки — шрифты

Скачать

Rondo — 24 социальных иконок — шрифтов

Скачать

40 различных иконок — шрифтов для сайта

Скачать

Socialicious — подборка из 62 иконок — шрифтов социальных медиа

Скачать

Квадратные иконки — шрифты бесплатно

Скачать

Тёмные шрифты — иконки социальных иконок

Скачать

Glyph иконки самых различных форматов совершенно бесплатно

Скачать

Красивые и бесплатные социальные иконки

Скачать

WPZOOM — различные социальные иконки в PSD разных размеров

Скачать

Социальные иконки в виде печатей

Скачать

110 социальных иконок в формате PNG

Скачать

Красивые и квадратные иконки социальных сетей

Скачать

24 бесплатных иконок социальных медиа в формате PNG

Скачать

28 иконок в формате PSD

Скачать

Социальные иконки с оптимизацией под Retina дисплеи

Скачать

Социальные иконки в виде марок

Скачать

15 небольших социальных иконок

Скачать

36 мини иконок социальных сетей в различных форматах

Скачать

10 PSD иконок бесплатно для сайта

Скачать

Иконки в стиле 8 — бит

Скачать

Бесплатные иконки для соцсетей: 30+ наборов

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

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

Vecteezy – это большая библиотека, где все иконки собраны в папках по типам файлов. Среди доступных форматов – SVG, EPS, & PNG и не только.

Набор из 12 иконок, оформленных в виде круглых кнопок.

Эти изображения будут отлично смотреться на любом фоне благодаря круглой белой рамке.

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

Этот набор будет отлично смотреться на любом фоне – как на светлом, так и на темном. Доступно в общей сложности 168 иконок.

Набор из 23 изображений в формате PNG, ICO и BMP.

Эти иконки оформлены в виде стикеров. В набор входит 12 изображений.

8 круглых иконок в форматах PNG и PSD.

Еще один большой набор изображений. Всего 110 иконок.

Данные иконки можно объединять при помощи Divi Builder. Пользователям доступны практически все геометрические формы. Кроме того, их можно кастомизировать согласно нуждам сайта.

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

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

Иконки в данном наборе представлены в нескольких стилях: круглые, многоугольные, прямоугольные, с закругленными углами, в форме капли и не только. Доступны форматы AI, EPS, SVG и PNG.

Данные иконки выглядят так, как будто были нарисованы от руки. В набор входит около 20 изображений.

Это набор иконок с длинной тенью, которая призвана сделать их плоский дизайн объемнее.

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

Треугольные иконки – отличный выбор, если вы хотите немного освежить дизайн сайта. В набор входит 20 изображений.

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

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

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

Плоского дизайна много не бывает. Данный набор иконок включает в себя 20 изображений в соответствующем стиле.

Набор из более чем 270 иконок круглой формы. Коллекция постоянно пополняется.

Еще один набор плоских иконок с удлиненными тенями. Всего доступно 14 изображений.

В этом наборе вы найдете прекрасно детализированные изображения, которые представляют собой более «реалистичные» версии стандартных иконок соцсетей.

Довольно лаконичный набор – все иконки выполнены в одном цвете с черными рамками. Всего доступно 12 значков.

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

Набор из 15 стильных иконок, оформленных в виде марок. Доступны в форматах PNG и PSD.

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

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

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

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

Заключение

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

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

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

Хотите разместить иконки ВКонтакте, Одноклассников, Фейсбука, Инстаграма и других соцсетей на сайте? На 1С-UMI это не составит труда. Во все сайты на этом сервисе уже встроены стандартные иконки ― достаточно включить этот блок, и кнопки появятся на вашем сайте. Но если хочется чего-то более оригинального, то всегда можно заменить эти иконки на любые другие.

В интернете есть множество ресурсов, откуда можно скачать уже готовые иконки. Вот некоторые из них:

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

Рисуем иконки при помощи Photoshop 2018

В первую очередь, скачиваем и устанавливаем сам графический редактор. Если нет желания приобретать лицензию на Photoshop ― воспользуйтесь его бесплатными аналогами, например, онлайн-сервисом pixlr.com. Мы рассмотрим этот процесс на примере Photoshop, но аналогичные действия можно сделать и в других программах.

Создаем файл нажатием кнопок Ctrl N или через меню «Файл-Создать».

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

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

Теперь жмем на кнопку «Создать».

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

Переходим на сайт flaticon.com и вбиваем в поисковую строку название той соцсети, иконку которой мы хотим создать. Допустим, Facebook. Кликаем по иконке без всяких рамок, квадратов и окружностей. Затем скачиваем бесплатно и сохраняем себе на компьютер в PSD-формате.

Открываем файл с помощью Photoshop сочетанием клавиш Ctrl O и выбором нужного документа или через меню “Файл – Открыть.

Рядом с созданными нами ранее файлом открывается другой – с иконкой Facebook. Выбираем инструмент «Перо» в боковой панели редактора, наводим его на иконку, зажимаем клавишу Ctrl и кликаем по изображению.

Теперь жмем на правую кнопку мыши и выбираем пункт «Определить произвольную фигуру».

Можем дать ей любое название. Например, Facebook.

Не забываем кликнуть по кнопке «ОК» после этого.

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

Наводим мышку на белый квадрат внутри нашего документа и кликаем правой кнопкой. Среди появившихся фигур выбираем ту, которую мы определили ранее – Facebook.

Жмем на Shift и левую кнопку в пустой области белого квадрата и растягиваем фигуру иконки до нужного нам масштаба (определяется на глаз).

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

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

Для изменения цвета заливки кликните по соответствующему значку и затем по прямоугольнику с палитрой.

Появится окно, где можно указать нужный нам цвет. Если речь о фирменных цветах Facebook, то используйте значение 4065ae.

Вписываем его в поле «#» и жмем кнопку «ОК». Иконка меняет заливку на цвет, который хорошо знаком пользователям социальной сети Цукерберга.

Следующий шаг – это создание рамки в виде окружности или квадрата.

Меняем инструмент «Произвольная фигура» на «Эллипс» или «Прямоугольник».

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

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

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

Результат получается примерно такой, как на изображении ниже.

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

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

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

Можно также наложить внешнюю или внутреннюю тень на нашу букву F. Для этой цели следует выделить мышкой слой с данной фигурой, кликнуть по нему правой кнопкой и выбрать пункт «Параметры наложения…».

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

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

Если первую фигуру, обозначающую Facebook, нужно пропорционально уменьшить, нажмите сочетание клавиш Ctrl T, затем зажмите Shift и Alt и левой кнопкой мышки стяните букву до нужного размера.

Если белый фон нам не нужен, а требуется прозрачный, берем инструмент «Волшебный ластик», выбираем фоновый слой и кликаем по белому пространству.

Белый цвет фона исчезает.

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

Теперь необходимо сохранить нарисованную нами иконку. Кликаем по кнопке «Файл» в меню и выбираем пункт «Экспортировать», затем «Экспортировать как».

Для сохранения прозрачности нужно указать PNG-формат, а для белого фона JPEG. После этого жмем на кнопку «Экспортировать все», выбираем путь для хранения и «Сохранить».

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

8 наборов шрифтовых социальных иконок / Иконки / Постовой

Социальные сети, куда же без них сегодня, они стали настолько популярны, что даже бизнес-сайты используют всякого рода лайки и кнопки поделиться. Для добавление на сайт социальных кнопок, конечно же, существует множество сервисов, но о них в другой раз. В большинстве случаев готовые решения не подходят или просто не устраивает дизайн, выбор которого у сервисов не так велик как хотелось бы. В такие моменты стает выбор, как сделать социальные кнопки? Есть много вариантов, но сегодня хотелось бы поговорить о реализации визуальной части с помощью шрифтовых социальных иконок.
Шрифтовые социальные иконки, да и вообще шрифтовые иконки, имеют ряд преимуществ таких как:

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

Благодаря этим преимуществам шрифтовые иконки стали популярны среди дизайнеров, разработчиков и используются таким CSS / HTML фреймворком как Bootstrap.
К вашему вниманию шрифты с иконками социальных сетей.

1. RONDO SOCIAL ICON FONT

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

2. Fontello — icon fonts generator

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

3. Mono Social Icons Font

Идеальное решение для быстрой интеграции шрифтовых иконок в проект, уже имеется код для вставки на CSS, SCSS и пример HTML. Единственный недостаток отсутствие популярных русских социальных сетей.

4. Pixeden — Social Icon Pack

Хорошие иконки с мощной демонстрационной страницей, можно видеть всю прелесть использования шрифтовых иконок и их стилизацию средствами CSS

5. Pictonic

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

6. Social Media Icons Pack

Пакет из 74 шрифтовых иконок

7. Socicon — the social icons font

Шрифт социальных иконок сделанный во Франции

8. JustVector Icons Font

Page not found (404)

Toggle navigation

Packs
- Значок пакеты недавно Загрузил
- Самых популярных значок пакеты
- Эксклюзивные наборы значков
категории
- Сельское хозяйство Иконки
- Животные Иконки
- Аватар и смайлики Иконки
- Красота и мода Иконки
- Бизнес и финансы Иконки
- Мультфильм Иконки
- Кино, телевидение и фильмы Иконки
- Одежда и аксессуары Иконки
- Преступление и безопасность Иконки
- Культура, религия и фестивали Иконки
- Дизайн и разработка Иконки
- Экология, окружающая среда и природа Иконки
- Электронная торговля и покупки Иконки
- Электронные устройства и оборудование Иконки
- Файлы и папки Иконки
- Флаги и карты Иконки
- Дизайн и разработка Иконки
- Экология, окружающая среда и природа Иконки
- Gym и Fitness Иконки
- Здравоохранение и медицина Иконки
- Промышленность и инфраструктура Иконки
- Инфографика Иконки
- Дети Иконки
- люблю Иконки
- Разное Иконки
- Музыка и мультимедиа Иконки
- Сеть и связь Иконки
- Недвижимость и строительство Иконки
- Школа и образование Иконки
- Наука и технологии Иконки
- SEO и Web Иконки
- Sign и Symbol Иконки
- Социальные медиа и логотипы Иконки
- Спорт и игры Иконки
- Инструменты, строительство и оборудование Иконки
- Транспорт и транспортные средства Иконки
- Путешествия, отели и каникулы Иконки
- Пользовательский интерфейс и жесты Иконки
- Погода и сезоны Иконки
стили значков
- 3D Иконки
- Badge Иконки
- Filled outline Иконки
- Flat Иконки
- Glyph Иконки
- Handdrawn Иконки
- Long shadow Иконки
- Outline Иконки
- Photorealistic Иконки
Популярные поиски
- Instagram Иконки
- Vk Иконки
- телефон Иконки
- Папки Иконки
- деньги Иконки
- Социальные Иконки
- Facebook Иконки
- Telegram Иконки
- Viber Иконки
- корзина Иконки
- Whatsapp Иконки
- стрелка Иконки
- Youtube Иконки
- дом Иконки
- Phone Иконки
- люди Иконки
- почта Иконки
- папки Иконки
- человек Иконки
- доставка Иконки
- галочка Иконки
- папка Иконки
- музыка Иконки
- Mail Иконки
- компьютер Иконки
- вк Иконки
- Steam Иконки
- Instagram Иконки
- сайт Иконки
- фото Иконки

404 Icon by Laura Reen

Работа с блоком «Социальные сети» в eSputnik

Основная цель блока “Социальные сети” в письме – это удержать/оставить/повысить активность покупателя или потенциального клиента в других каналах посредством подписки на ваши социальные страницы. Следовательно, ссылки на социальные сети стоит использовать как в триггерной, так и в промосерии писем.

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

Как добавить блок “Соц.сети” в письмо

Во вкладке “Контент” зайдите в пункт меню “Блоки”, выберите блок “Соц. сети” и перетяните его в письмо.

При этом возможны два варианта добавления блока:

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

Если перетащить блок в пустую структуру, все форматирование – отступы, фон и т.д. – нужно будет задать во вкладке “Внешний вид” меню “Структуры”, расположенного слева.

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

Здесь можно загрузить кастомные иконки или выбрать из уже предложенных вариантов. Если у вас есть свой набор оригинальных иконок, выберите пункт “Пользовательские лого”. Появится окно загрузки изображений:

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

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

Как управлять блоком “Соц.сети”

Нажмите на добавленный блок соцсетей в письме один раз и перейдите в меню настроек блока слева .

Чтобы добавить заливку блока, нужно нажать на поле с кодом цвета и в раскрывающемся окне выбрать нужный цвет, или добавить код по примеру #000000.

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

3. С помощью значка “Корзина” иконка удаляется.

4. Чтобы добавить новую социальную сеть, необходимо нажать на “+” и затем в раскрывающемся окне выбрать необходимую иконку.

Помимо иконок соцсетей здесь также есть вкладки “Чат”, где собраны значки популярных мессенджеров, и “Другие”, где можно найти логотипы других широко распространенных каналов связи: Blogger, сервисы Google и Yandex, магазины приложений и т.д.

5. Для вставки альтернативного текста и названия соцсети нужно активировать переключатель “еще” и в раскрывающемся меню заполнить соответствующие поля.

6. Чтобы добавить ссылку, просто скопируйте ее и вставьте в специальное поле.

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

Нажмите на кнопку “Сайт” и выпадающем меню перейдите к разделу “Поделиться”.

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

Скопируйте ссылку и вставьте ее в соответствующее поле:

В зависимости от соцсети в настройках возможны дополнительные опции.

Twitter

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

Pinterest

В первую очередь Pinterest — это сервис для красивой и удобной визуализации. Добавьте соответствующее изображение и описание к нему, чтобы пользователь мог “приколоть” ваше письмо к доске.

Картинку можно выбирать любым способом, доступным в редакторе.

Почта

Добавьте тему, которая отразит суть письма при пересылке:

7. Функция выбора выравнивания иконок в блоке применима отдельно как для стандартной десктопной, так и для мобильной версии. Для настройки выравнивания на мобильных нужно нажать на значок телефона и выбрать положение: справа, слева, по центру.

8. Чтобы увеличить или уменьшить отступы между иконками в блоке, нажмите на “+” или на “-”.

Регулировать высоту и ширину отступов от блока можно с помощью знака “+” для увеличения или “-” для уменьшения. Максимальные значения отступов – 40px. Здесь также возможно устанавливать отступы отдельно для десктопной и для мобильной версии письма.

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

10. Также можно выбрать опцию отображения блока только для HTML или AMPHTML-версии письма. При этом появится соответствующая метка в левом верхнем углу блока.

Как можно использовать блок соцсетей в email-рассылках

В футере

Самое популярное место для размещения ссылок на социальные сети.

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

В хедере

Второе по популярности пространство для размещения социального блока.

Расположение иконок соцсетей в шапке письма исключает вероятность того, что подписчик их не заметит просто потому, что не долистал письмо до конца. Блок с социальными сетями в хедере привлекает больше внимания, чем в футере, поэтому имеет смысл разместить здесь более конверсионные ссылки. Например, на скачивание вашего приложения в Google Play или App Store (иконки можно выбрать на вкладке “Другие” в окошке добавления иконок).

В основной части письма

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

В разделе “Свяжитесь с нами”

Предоставьте подписчикам возможность выбрать, как им удобнее с вами связаться. Разместите несколько чатов в теле письма или в футере, воспользовавшись соответствующими стандартными иконками из вкладки “Чат” или собственными дизайнерскими, чтобы информация точно не осталась без внимания.

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

В отдельном письме

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

С предложением поделиться письмом

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

+Бонус

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

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

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

Вы здесь: Главная — CSS — CSS3 — Иконки соц. сетей для сайта

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

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

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

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

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

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

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

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


<div>

  <ul>

    <li>

      <div>

     <i></i>

     </div>

    </li>

    <li>

     <div>

      <i></i>

     </div>

    </li>

    <li>

     <div>

      <i></i>

     </div>

    </li>

    <li>

     <div>

      <i></i>

     </div>

    </li>

    <li>

     <div>

      <i></i>

     </div>

    </li>

  </ul>

</div>

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


<i></i>

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


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

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

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% вниз:


.icon {

    margin-top: 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 эффекта достигается свойству transition. На codepen вы можете посмотреть, каким элементам это свойство задано.

See the Pen Social icons Font Awesome by porsake (@porsake) on CodePen.

Создано 20.06.2018 10:22:30
Михаил Русаков

Предыдущая статья Следующая статья

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

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

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

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

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

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

Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>
Она выглядит вот так:
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

бесплатных иконок социальных сетей (те, которые вам действительно разрешено использовать)

Ни один веб-сайт не обходится без значков социальных сетей. И в настоящее время все, от подписей в электронной почте и визитных карточек до плакатов и видеороликов, выигрывает от небольшой «иконографии».

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

Изображение предоставлено Fancycrave под CC0

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

Бонус: Прочтите пошаговое руководство по стратегии в социальных сетях с профессиональными советами о том, как расширить свое присутствие в социальных сетях.

Источники значков социальных сетей

Facebook

Загрузите полный набор иконок.

Основные принципы бренда:

Используйте только синий значок в Facebook или перевернутый белый и синий. Вернитесь к черно-белому режиму, если столкнетесь с цветовыми ограничениями. Доступны синяя, серая, белая и черная версии.
Значок Facebook всегда должен отображаться в контейнере со скругленными углами и квадратом.
Убедитесь, что значок воспроизводится в удобочитаемом размере.Он должен быть такого же размера, как и все остальные значки.
Не анимируйте и не представляйте логотип в виде физических объектов.
Загрузите значки в соответствии с вашим носителем. Варианты значков Facebook, предназначенные для Интернета, печати, телевидения и кино.

Иконки для использования в Интернете (.png)

Твиттер

Загрузите полный набор иконок.

Основные принципы бренда:

Используйте только синий или белый значок в Twitter.Когда применяются ограничения на расцветку печати, Twitter разрешает отображение логотипа черным цветом.
Twitter предпочитает, чтобы его значок отображался без контейнера, но предлагает квадратные, закругленные квадратные и круглые контейнеры, если они лучше соответствуют вашим потребностям.
При использовании логотипа поверх изображения всегда используйте белую версию.
Не анимируйте логотип, не украшайте его пузырями со словами или другими существами.
Свободное пространство вокруг логотипа должно составлять не менее 150% ширины значка.
Иконки должны иметь минимальную ширину 32 пикселя.

Иконки для использования в Интернете (.png)

Instagram

Загрузите полный набор иконок.

Основные принципы бренда:

Для представления Instagram могут использоваться только значки из раздела «Активы» сайта ресурсов бренда Instagram. Эти значки доступны в цветном и черно-белом цвете.
иконок Instagram должны быть представлены без контейнера.Квадрат, круг, скругленный квадрат и другие формы контейнеров недоступны.
Не используйте этот значок с названием вашей компании, товарным знаком, другим языком или символом.
При использовании значка для вещания, радио, наружной рекламы или печати размером более 8,5 x 11 дюймов вам необходимо запросить разрешение и включить макет того, как вы планируете использовать.
Контент Instagram не должен составлять более 50% вашего дизайна или более 50% общей продолжительности вашего контента.

Иконки для использования в Интернете (.png)

Загрузите полный набор иконок.

Основные принципы бренда:

LinkedIn предпочитает, чтобы сине-белый значок отображался на белом фоне. Значок всегда должен отображаться в цвете онлайн. Если это невозможно, используйте обратный бело-синий или черно-белый значок.
Используйте сплошной белый значок на темном фоне или фотографиях, а сплошной черный значок — на светлом фоне или фотографиях или в приложениях для одноцветной печати.Убедитесь, что «вход» прозрачен.
Значок LinkedIn никогда не должен быть кругом, квадратом, треугольником, трапецией или любой другой формой, кроме квадрата с закругленными углами.
Иконки LinkedIn обычно используются в Интернете двух размеров: 24 и 36 пикселей. Минимальный размер — 21 пиксель в Интернете или 0,25 дюйма (6,35 мм) при печати. Значки размера для печати или большего размера должны ссылаться на сетку из 36 единиц, найденную здесь.
Границы значка должны составлять примерно 50% от размера контейнера. Минимальные требования к свободному пространству определяют, что вокруг значка следует использовать отступы размером в два символа «i» в LinkedIn.
Для использования на телевидении, в кино или других видеопродукциях требуется запрос разрешения.
Если вы используете призывы к действию, такие как «Следуйте за нами», «Присоединяйтесь к нашей группе» или «Просмотрите мой профиль в LinkedIn» вместе со значком, используйте другой шрифт и цвет, предпочтительно черный.

Иконки для использования в Интернете (.png)

Загрузите значки.

Основные принципы бренда:

Значок P Pinterest всегда должен отображаться красным цветом Pinterest, в печатном виде или на экране и никоим образом не изменяться.
Чтобы использовать Pinterest в видео, телевидении или кино, компании должны отправить письменный запрос своему менеджеру по работе с партнерами в Pinterest.
Всегда добавляйте призыв к действию после показа значка Pinterest. Убедитесь, что размер значка пропорционален тексту призыва к действию.
Допустимые призывы к действию: популярные на Pinterest, Найдите нас на Pinterest, Следуйте за нами на Pinterest, Посетите нас, Найдите больше идей на Pinterest, Вдохновляйтесь на Pinterest. Не используйте фразы «Тенденции на Pinterest» или «Тенденции».
Всегда отображайте или гиперссылку на URL-адрес Pinterest при использовании значка.

Иконки для использования в Интернете (.png)

YouTube

Загрузите полный набор иконок.

Основные принципы бренда:

Значок YouTube доступен в красном цвете YouTube, почти черном монохромном и белом монохромном.
Если фон не работает с красным значком YouTube или цвет не может быть использован по техническим причинам, выберите монохромный.Почти черный значок следует использовать для светлых разноцветных изображений. Белый значок следует использовать на темных разноцветных изображениях с прозрачным треугольником кнопки воспроизведения.
YouTube должны иметь высоту не менее 24 dp в Интернете и 0,125 дюйма (3,1 мм) в печатном виде.
Свободное пространство для значка YouTube должно составлять половину ширины значка.
Значок YouTube можно использовать только тогда, когда он ссылается на канал YouTube.

Иконки для использования в Интернете (.png)

Snapchat

Загрузите полный набор иконок.

Основные принципы бренда:

Показывать только черный, белый и желтый значок Snapchat.
Не окружайте логотип другими персонажами или существами.
Минимальный размер значка «Призрак» — 18 пикселей в Интернете и 0,25 дюйма при печати.
Значок доступен без контейнера в черном или белом цвете или с желтым скругленным квадратом.
Свободное пространство вокруг логотипа должно составлять не менее 150% ширины логотипа.Другими словами, отступ должен быть такого же размера, как половина Призрака.

Иконки для использования в Интернете (.png)

Загрузите полный набор иконок.

Основные принципы бренда:

Показывать значок WhatsApp только зеленым, белым (на зеленом фоне) и черно-белым (в материалах, которые в основном черно-белые).
Обязательно пишите WhatsApp как одно слово с правильными заглавными буквами
Используйте зеленый квадратный значок только при обращении к приложению iOS.

Иконки для использования в Интернете (.png)

Что такое значки социальных сетей и зачем их использовать?

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

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

Чаще всего в значках социальных сетей используется первая буква или символический логотип компании, работающей в социальных сетях. Представьте себе Facebook F, птицу Twitter или камеру Instagram.

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

Благодаря их широкому использованию предприятиями, большинство клиентов ожидают, что компании будут иметь ссылки на значки на своих веб-сайтах, и достаточно сообразительны, чтобы знать, где их искать.Аккуратные и единообразные по стилю значки — отличная альтернатива надоедливым всплывающим окнам с надписью «следуй за мной».

Как использовать значки социальных сетей в своих маркетинговых материалах (юридически)

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

Сайты

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

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

Изображение взято с домашней страницы Lenny.com

Электронные письма и информационные бюллетени

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

Чтобы добавить значки в подпись электронной почты, выполните следующие действия:

Подпись Outlook

1.В Outlook на вкладке «Главная» выберите «Новое электронное письмо».
2. На вкладке «Сообщение» в группе «Включить» выберите «Подпись», затем «Подписи».
3. На вкладке «Подпись электронной почты» в поле «Изменить подпись» выберите подпись, которую нужно изменить.
4. В текстовом поле «Изменить подпись» добавьте новую строку под текущей подписью.
5. Выберите Изображение, затем перейдите в папку, в которую вы загрузили значки, и выберите значок, который хотите добавить.
6. Выделите изображение и выберите «Вставить», затем «Гиперссылка».
7. В поле «Адрес» введите веб-адрес соответствующего профиля компании.
8. Нажмите OK, чтобы завершить изменение новой подписи.
9. На вкладке «Сообщение» в группе «Включить» выберите «Подпись», а затем выберите новую измененную подпись.

Подпись Gmail

1. Откройте Gmail.
2. Щелкните значок настроек в правом верхнем углу.
3. В разделе «Подписи» щелкните символ «Вставить изображение», чтобы добавить загруженный значок.
4. Выделите изображение и щелкните символ ссылки.
5. Добавьте веб-адрес для профиля своей компании.
6. Прокрутите вниз и выберите Сохранить изменения.

Информационные бюллетени

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

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

Изображение из электронного бюллетеня Sephora

Распечатать

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

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

Вариант 1: (F) facebook.com/Hootsuite
(T) twitter.com/Hootsuite
Вариант 2: (F) Hootsuite
(T) @Hootsuite
Вариант 3: (F) (T ) @Hootsuite

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

Печатная реклама чая Дэвида, через журнал Escapism, One More Bake от Элизабет Новианти Сусанто на Behance. Cado от Кристи Стивенс на Behance.

ТВ и видео

Как и в случае с печатью, если вы используете видео на носителе, который не позволяет зрителям нажимать на значок, вам следует указать URL. На YouTube вы можете добавлять интерактивные значки с помощью функции аннотаций. Чаще всего призыв к действию ставится в конце видео бренда. Убедитесь, что у зрителей достаточно времени, чтобы прочитать URL.

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

Лучшие практики использования значков социальных сетей

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

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

Скачать из первоисточника

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

Без изменений

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

Размер равномерно

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

Равномерное пространство

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

Выберите от трех до пяти

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

Упорядочить по приоритету

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

Используйте последнюю версию

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

Не используйте слово

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

Сделайте свой бренд в центре внимания

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

Ссылка на профиль вашей компании

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

Запросить разрешение

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

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

Начать

50+ высококачественных бесплатных иконок социальных сетей

Эта страница может содержать ссылки на наших спонсоров или партнерские ссылки.Учить больше.

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

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

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

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

Бесплатные иконки социальных сетей от Vecteezy

Этот пакет включает значки для 16 популярных социальных сетей, таких как Facebook, Instagram, Twitter, LinkedIn, Pinterest, Snapchat, YouTube, Tumblr и других. У каждого значка есть закругленные углы и тень.

Бесплатные иконки социальных сетей от Vecteezy

Это более крупный набор из 25 значков. Каждая иконка размещена на красочном закругленном фоне.

Логотипы социальных сетей

Если вы ищете простые логотипы для социальных сетей, этот набор от Flaticon идеально подходит.Он включает в себя значки логотипов для 49 различных социальных сетей.

Иконки в черном круге

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

Иконки Круг Тень

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

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

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

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

Этот набор из 16 иконок от Flaticon включает самые популярные социальные сети с простыми иконками в стиле логотипа.

Бесплатный набор социальных сетей с плоской иконкой

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

Векторные иконки социальных сетей в круг

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

Набор значков социальных сетей и контактов

Он содержит 50 значков социальных сетей и контактной информации в стиле закругленных линий.Иконки в векторном формате (SVG).

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

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

Цветные значки, нарисованные вручную

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

Вкладки со значками в социальных сетях

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

Бесплатные векторные иконки в социальных сетях

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

Набор иконок в социальных сетях

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

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

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

Бесплатные иконки социальных сетей от Vecteezy

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

Длинная тень квадратный векторный набор иконок

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

Простой плоский цветной векторный набор иконок

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

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

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

Пузыри в социальных сетях

Иконки социальных сетей в стиле рисованной иллюстрации представлены перед пузырями пастельных тонов в этом наборе из icons8.

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

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

Набор голубых иконок с заливкой контура

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

Набор иконок социальных сетей с блестящей круглой кнопкой

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

Internet 2020 Icon Set от Iconfinder

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

Набор социальных иконок с ломаной линией

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

Большой пакет больших иконок

В этот набор входит более 60 бесплатных иконок социальных сетей. Иконки можно загрузить в формате png или svg размером от 16 до 512 пикселей.

Календарь Значки социальных сетей

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

Иконки социальных сетей с пунктирными кругами

Иконки в этом наборе окружены красочными кружками с белой пунктирной рамкой.Включена 21 векторная иконка.

Набор социальных иконок Golden Button

Этот набор иконок на вес золота. Пышный золотой градиент с блеском и затемненными скошенными краями придает этим иконам теплоту и глубину.

Набор черно-красных каракулей

В этом наборе каждая иконка красного цвета размещена на черных очертаниях. Эффект смелый и слегка гранжевый.

Набор угловых значков

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

Cool Social Network Icon Set

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

Неуморфные социальные иконки

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

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

Простые значки социальных сетей в стиле Windows 10. Есть 71 бесплатная иконка в формате SVG или PDF.

Набор иконок милый контур

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

Чистый плоский иллюстрированный набор иконок

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

Набор социальных иконок с плавающей кнопкой

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

Минимальные социальные иконки

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

Иконки социальных сетей в виде точек

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

Набор форм значков социальных сетей

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

Современный двухцветный набор иконок социальных сетей

Это забавный набор иконок социальных сетей черного цвета на двухцветном бело-розовом или бело-синем круге.Благодаря разным цветам и диагонали они действительно выглядят великолепно и динамично в группе.

Набор социальных иконок абстрактной формы

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

Линейный и линейный цветной набор социальных иконок

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

Пакет разнообразных социальных сетей

Этот пакет включает плоский стиль, значки с заливкой и контуром, всего 50 бесплатных значков в форматах загрузки векторных значков (SVG и EPS), PNG, PSD и Iconfont.

Набор колец для социальных сетей

Это значки в виде круга с деталями в виде кольца, которые добавляют что-то особенное. Загрузите их в форматах png и eps.

Белый на сером Набор иконок социальных сетей

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

Заключение

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

Дополнительные ресурсы см .:

иконок социальных сетей на вашем сайте

После месяцев ворчания мы в конце концов убедили Дэниела, нашего доктора медицины, встать перед камерой, чтобы поделиться своими мудрыми словами!

На этой неделе он расскажет о размещении значков социальных сетей на вашем сайте.

Иконки социальных сетей. Где их разместить на своем сайте?

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

Дэниел не думает, что они НИКОГДА должны быть наверху, и вот почему:

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

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

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

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

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

НО, имейте их в нужном месте.Всегда думайте о пути к покупке: это путешествие не должно вовлекать вас в побуждение посетителя (и потенциального клиента) покинуть ваш сайт.

В идеале, вы должны размещать значки социальных сетей в нижнем колонтитуле и / или на странице контактов.

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

Вы много работали, чтобы привлечь на свой сайт клик и посетителя — не потеряет их в социальной сети!

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

Не стесняйтесь оставлять комментарии на YouTube, и мы постараемся ответить на любые ваши вопросы.

6 способов интегрировать кнопки социальных сетей в ваш сайт

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

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

Вставить значки социальных сетей как изображения

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

Я рекомендую искать значок страницы.com, например.

Здесь вы можете просто ввести название нужного значка (например, «instagram»), и вы получите список бесплатно загружаемых файлов изображений в очень хорошем качестве.

Список других хороших поставщиков иконок или наборов иконок можно найти на buffer.com.

Теперь я покажу вам, как встроить иконку в ваш сайт. Мы предполагаем, что значок с именем «instagram.png» находится в той же папке, что и ваш HTML-файл.

Затем вы можете использовать следующий фрагмент кода:

Тег a используется, чтобы сделать значок ссылкой. Конечно, вы должны заменить адрес, показанный выше, на адрес вашего собственного профиля в Instagram. Установив свойство target = "_ blank" , вы убедитесь, что профиль открывается в новой вкладке браузера.

Если значок расположен во вложенной папке относительно файла HTML (например, «значки»), путь изображения должен быть соответствующим образом скорректирован:

Конечно, вы можете изменить размер значков в соответствии со своими потребностями. Я рекомендую вам определить класс CSS для всех значков, принадлежащих к общей группе, например "sm_icon" :

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

 .sm_icon {
 
  ширина: 50 пикселей;
  / * высота регулируется автоматически * /
}

Выбор формата изображения: PNG или SVG?

Вы заметите, что файлы изображений доступны в различных форматах файлов, таких как JPG, GIF, PNG или SVG.Типы файлов имеют разные характеристики и, следовательно, определенные преимущества и недостатки использования на веб-сайтах.

Мы разделяем их на растровые форматы (JPG, GIF, PNG) и векторный формат SVG. Форматы на основе растра имеют фиксированное разрешение с определенной высотой и шириной в пикселях.

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

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

Это может произойти, например, если вы загрузите значок с разрешением 64x64px из Iconfinder, а затем определите ширину 200 пикселей в настройках CSS.

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

Таким образом, все размеры экрана и уровни масштабирования могут обрабатываться одним и тем же файлом.Вы можете обрабатывать векторные изображения так же, как любой другой формат, и включать их как img-tags с желаемой высотой и шириной в свой HTML-код:

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

Встраивание значков социальных сетей в качестве шрифта

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

Я объясню процедуру на примере библиотеки «Font Awesome»:

Создайте бесплатную учетную запись пользователя на https://fontawesome.com/ (теперь это требование для импорта бесплатных или платных значков).

В личном кабинете вы найдете раздел «Комплекты». Ваш новый комплект имеет идентификатор, состоящий из нескольких цифр и букв. После нажатия на комплект вам будет представлен код сценария, который вам нужно вставить между тегами заголовка вашей HTML-страницы, чтобы импортировать библиотеку.

В следующем примере я замаскировал идентификатор с помощью x-символов:

Затем вы можете искать значки, например «Инстаграм». Для каждого значка вы найдете инструкции о том, как включить его в HTML-код. Я выбрал значок с названием «instagram-square», который включен, как показано ниже.

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

 .fa-instagram-square {
    цвет: зеленый;
    размер шрифта: 18 пикселей;
}

Обратите внимание, что ссылка на скрипт font awesome устанавливает соединение с внешним сервером. Это может включать передачу личных данных посетителей вашего сайта в Font Awesome.

В зависимости от применяемых правовых норм (например,грамм. gdpr), возможно, вам придется проинформировать своих пользователей об этой услуге. Или вы можете перестраховаться и разместить библиотеку самостоятельно. Информацию об этом можно найти здесь: Хостинг Font Awesome Yourself

В качестве альтернативы Font Awesome я могу порекомендовать значки материалов от Google. Интеграция иконок здесь очень похожа на Font Awesome.

Интегрировать кнопки социальных сетей (лайкать, делиться) вручную для разных платформ

Если вы хотите добавить лайки, поделиться и другие интерактивные кнопки из Facebook, Twitter и др., вы должны использовать специальный HTML-код, предоставляемый отдельными платформами.

На странице Facebook для разработчиков вы можете сгенерировать HTML-код для различных кнопок Facebook.
На странице Twitter для веб-сайтов вы найдете инструкции по встраиванию кнопок Tweet, кнопок Follow или для встраивания Tweets.
Другие сети, такие как Instagram, Pinterest, LinkedIn, также предлагают вам возможность встраивать кнопки или виджеты на ваш сайт.

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

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

Интегрируйте кнопки социальных сетей с помощью специальных провайдеров

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

Примером этого является sharethis. После бесплатной регистрации вы можете создать панель кнопок, содержащую до 43 кнопок социальных сетей!

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

Этот сценарий, конечно же, установит соединение с сервером sharethis. Вы должны сообщить об этом посетителям вашего сайта в своей политике конфиденциальности. Вы также можете перенаправить их на https://sharethis.com/privacy/.

Здесь вы найдете информацию о том, какие пользовательские данные собираются sharethis. Имейте в виду, что на этой странице есть кнопка «Отказаться», которую можно использовать для предотвращения показа рекламы, связанной с пользователями, на основе данных, собранных sharethis.

Важно: вы также должны проинформировать своих пользователей о политиках конфиденциальности отдельных платформ, таких как Facebook, Twitter и т. Д., потому что sharethis передает данные пользователей на соответствующие платформы.

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

В отношении защиты данных применяются те же рекомендации, что и для sharethis. Информация о сборе и использовании пользовательских данных представлена на https://www.addtoany.com/privacy.

Конечно, существует гораздо больше провайдеров, таких как addthis.

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

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

wpbeginner: 10 лучших плагинов социальных сетей для WordPress (2020)

Кроме того, поставщики sharethis и addtoany также предлагают свои услуги в виде плагина WordPress.

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

Заключение

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

Ваш интерфейс загружает процессор ваших пользователей?

По мере того, как веб-интерфейсы становятся все более сложными, ресурсоемкие функции требуют все большего и большего от браузера. Если вы заинтересованы в мониторинге и отслеживании использования ЦП на стороне клиента, использования памяти и многого другого для всех ваших пользователей в производственной среде, попробуйте LogRocket.https://logrocket.com/signup/

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

Модернизируйте отладку веб-приложений — начните мониторинг бесплатно.

Как отображать и изменять значки социальных сетей? — Rocketspark

Хотите воспользоваться преимуществами отображения значков социальных сетей на своем веб-сайте? Вот как это сделать:

Чтобы показать значки Facebook, Instagram, Twitter, LinkedIn или Pinterest на своем веб-сайте, вам сначала необходимо добавить свои учетные записи социальных сетей в раздел Social Media на панели инструментов
Если вы хотите, чтобы значки социальных сетей отображались в основной части вашего веб-сайта, вы можете добавить блок кнопок социальных сетей в любом месте вашего веб-сайта.
Щелкните значок карандаша при наведении курсора на блок кнопок социальных сетей, чтобы выбрать, отображать ли кнопки социальных сетей в виде полных кнопок или отображать их в виде значков.
Если вы хотите, чтобы они отображались в виде значков, вы можете выбрать, выравнивать ли значки в блоке по левому, по центру или по правому краю.

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

Чтобы изменить положение этих значков на странице на рабочем столе, перейдите к Изменить дизайн в верхнем левом углу панели инструментов.
Перейдите к Social Media Icons и выберите раскрывающееся меню Menu and & Header Icons , чтобы отобразить значки сбоку окна, на панели контактов, в конце меню страницы или скрыть значки.
Если вы хотите отображать значки социальных сетей в нижнем колонтитуле рабочего стола / мобильного устройства, вы можете установить флажок Показывать значки в нижнем колонтитуле? для отображения значков социальных сетей в нижнем колонтитуле вашего веб-сайта (как на компьютере, так и на мобильном устройстве).

Выберите стили социальных иконок / цвет / размер

Вы можете решить, как эти значки социальных сетей будут выглядеть на всем сайте или на уровне стека. Чтобы изменить дизайн всего сайта, щелкните меню «Редактировать дизайн» в верхнем левом углу и перейдите к значкам социальных сетей. Или используйте стиль стека, чтобы изменить дизайн в определенном стеке.
Вы можете выбрать предпочтительный стиль значков, настроить цвет и размер этих значков.
Чтобы настроить цвет этих значков в соответствии с вашим веб-сайтом, щелкните раскрывающееся меню «Цвет значка».Здесь вы можете выбрать цвета бренда социальных сетей или выбрать свои собственные цвета, которые лучше всего подходят вашему собственному бренду веб-сайта.

Как правильно использовать значки социальных сетей (и наши 13 любимых наборов)

Иконки социальных сетей — жизненно важная часть вашей маркетинговой стратегии.

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

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

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

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

Мы также включили несколько безопасных и привлекающих внимание наборов значков, которые вы можете скачать и сразу же использовать.

Да, важно, как вы используете значки социальных сетей

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

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

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

Вы помните, как Twitter выглядел в 2006 году? Или я должен сказать Twttr.

Помимо ярких граффити и надписей «Что у вас в голове», сам логотип говорит о том, для кого и для чего предназначено приложение: оно модно, непринужденно и быстро.

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

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

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

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

Конечно, вас могут не сразу привлечь к суду или наложить штраф. Прекращение и воздержание, скорее всего, будет первым, но зачем рисковать?

Как правильно использовать значки социальных сетей для каждой платформы

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

Twitter, Facebook, Instagram — все эти бренды хотят, чтобы вы использовали их логотип и даже добавили в него свой собственный стиль в разумных пределах.

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

Где найти и скачать нужные значки социальных сетей?

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

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

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

13 классных иконок, примеров и кнопок социальных сетей, которые мы любим

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

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

1. Иконки социальных сетей, выделенные жирным шрифтом DesignBolts

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

3. Ультратонкие социальные иконки Medialoot

4. Плоские значки социальных сетей Printkeg

5. Социальные иконки в стиле iOS7

6. Расширенные плоские иконки социальных сетей

7.Социальные иконки Simple Line

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

9. Рисованные иконки Freepik

10. Christophe Kerebel Наброски социальных иконок

11. Черно-белые иконки Adobe Muse

12. Blogtacular Иконки социальных сетей с геометрическим шестиугольником

13. Publicons Простые круглые большие значки социальных сетей

Почему бы не создать свои собственные значки социальных сетей?

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

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

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

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

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

Что такое значки социальных сетей?

Иконки социальных сетей — это графические изображения, которые позволяют людям взаимодействовать с социальными сетями во время посещения веб-сайта.Эти значки несут логотипы различных социальных сетей и веб-сайтов для обмена контентом: изогнутая буква «F» в Facebook, знаменитая птица Twitter (или стилизованная буква «T»), фигурная буква «P» в Pinterest и другие.

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

Вы, вероятно, найдете эти кнопки «поделиться» на боковой панели, когда будете читать статью на новостном веб-сайте или проверять сообщение в блоге в интернет-магазине.Убедитесь, что они заметны, чтобы читателям было легче распространять ваш контент.

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

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

Что такое виджеты социальных сетей?

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

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

Когда дело доходит до первого, вы обязательно захотите включить основные, такие как Facebook, Twitter и (при условии, что у вас есть высококачественная графика для публикации) Instagram. Более инклюзивный подход также не повредит, и вы можете включить больше вариантов, чем только те, которые вы знаете, чтобы люди могли делиться вашим контентом повсюду.Что касается виджетов с кнопками подписки, просто придерживайтесь тех, на которых у вас есть учетная запись.

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

Лучшие виджеты для социальных сетей

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

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

1) Добавить

С помощью AddThis вы можете выбирать из множества вариантов расположения кнопок социальных сетей.Вы можете прибить их к любой части страницы или заставить плавать вместе с контентом. Кнопки могут быть квадратными или круглыми, и они могут расширяться, чтобы открывать опции (например, ретвит или «сердечный» пост в Twitter) одним щелчком мыши или даже наведением курсора мыши. AddThis также поставляется с огромным набором инструментов: функции включают обширную настройку, инструменты аналитики и поддержку Google AMP, и все это для любого количества доменов, которое вы хотите.

Долгое время у этой платформы была бесплатная версия, план «профи» и бизнес-пакет.Ситуация изменилась: в июне 2018 года компания заявила в своем блоге, что AddThis теперь полностью бесплатен. Функции, за использование которых клиенты раньше должны были платить ежемесячно, теперь доступны бесплатно. Помимо многих других преимуществ, это означает, что вы можете использовать любой из множества типов социальных сетей и кнопок подписки на своем веб-сайте, не платя ни за что. Вам будет сложно найти лучшую сделку.

2) Добавить

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

AddToAny предоставляет гораздо больше, чем просто набор кнопок. Вы можете использовать Google Analytics для отслеживания всех видов активности, связанной с тем, как пользователи социальных сетей взаимодействуют с вашими веб-страницами.Эта интеграция предоставляет вам бесценные данные для дальнейшего совершенствования вашей стратегии в социальных сетях. Если ваши результаты особенно впечатляют, у вас даже есть возможность отобразить некоторые из этих данных. Активируйте счетчик публикации, и любой, кто прочитает ваши сообщения в блоге, сможет точно узнать, сколько людей поделились статьей на разных веб-сайтах.

3) Буфер

Buffer — это платформа, которая предоставляет вам множество инструментов для управления учетными записями в социальных сетях.Крупные компании, такие как Microsoft и Github, насчитывают пять миллионов пользователей платформы. Их набор включает автоматическое планирование, создание изображений, возможность сокращать и отслеживать ссылки и многое другое. Конечно, он также включает в себя значки социальных сетей. Качество продукции компании было отмечено: всего через восемь лет после основания Buffer вошел в топ-40 рейтинга Entrepreneur360 журнала Entrepreneur Magazine за 2018 год.

Загвоздка в том, что у Buffer разные планы платежей, от 15 до 199 долларов в месяц.К счастью, у них есть бесплатный вариант. С помощью этого «Начального плана» вы можете использовать их услуги для управления тремя учетными записями на ваш выбор между Facebook, Twitter, LinkedIn и Instagram, а также соответствующими значками. Выбор может показаться не таким уж большим, но это четыре из крупнейших веб-сайтов социальных сетей, и вы по-прежнему получаете функции, упомянутые в предыдущем абзаце. Если вы вторгаетесь в мир электронной коммерции, связанной с социальными сетями, бесплатный план Buffer может быть идеальным.

5) Шарикси

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

Их галерея включает в себя иконки для разных сайтов в одиннадцати различных стилях.Фигуры включают стандартные квадраты и круги, а также звезды и «бусинки». Есть даже три стильных черно-белых версии иконок. Кроме того, интегрировать этот виджет в ваш интернет-магазин очень просто. Вам даже не нужно ничего скачивать. Просто выберите нужные значки, затем скопируйте HTML-код (который автоматически изменяется в зависимости от вашего выбора) и вставьте его в код своего сайта. Sharexy может похвастаться не таким количеством функций, как другие записи, но он выделяется тем, что наиболее важно для этой статьи.

5) Powr.io

Несмотря на то, что Powr.io Social Media Icons намного моложе, чем другие записи в этом списке, за последние несколько лет он действительно сделал себе имя. Их бесплатный план включает обмен в социальных сетях, а также инструменты для анализа контента. Эта платформа отлично подходит для продвижения вашего контента и вашего сайта.

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

Powr.io бывают разных форм, размеров и стилей. У некоторых есть логотип сам по себе, а некоторые включают полное название платформы рядом с логотипом.Некоторые закрашены фирменным цветом сайта (например, темно-синим для Facebook), а некоторые имеют одинаковый цвет фона.