Как добавить иконки соц сетей в html

Как я могу добавить на свой сайт иконки социальных сетей?

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

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

В редакторе конструктора сайтов нажмите кнопку Элементы.

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

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

Кликните на иконку соцсети, чтобы открыть панель настроек.

Платформы

Действие
Выберите, хотите ли вы, чтобы подписались на ваши социальные сети, или публиковали ваш сайт в ленте посетителей.

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

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

Настройки иконки

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

Интервал
Установите интервал между иконками с помощью ползунка.

Настройки блока

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

Вы можете настроить его цвет, отступ, границу, радиус и тень.

Абсолютное позиционирование

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

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

Скрывать на мобильных

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

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

Узнать, как стилизовать кнопки социальных сетей с помощью CSS.

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

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

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Square Пример

/* Стиль все шрифты иконок */
.fa padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
>

/* Добавить эффект наведения, если вы хотите */
.fa:hover opacity: 0.7;
>

/* Установите определенный цвет для каждого бренда */

/* Facebook */
.fa-facebook background: #3B5998;
color: white;
>

/* Twitter */
.fa-twitter background: #55ACEE;
color: white;
>

Круглая кнопка

Совет: Добавить border-radius:50% для создания круглых кнопок и уменьшения width :

Rounded Пример

.fa <
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
border-radius: 50%;
>

Совет: Зайдите на наш учебник Иконки, чтобы узнать больше о значках.

Зайдите на наш учебник CSS Кнопки, чтобы узнать больше о том, как стилизовать кнопки.

Мы только что запустили
SchoolsW3 видео

ВЫБОР ЦВЕТА

курс сегодня!

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

Получить сертификат

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Как добавить иконки социальных сетей на сайт в Рег.сайте

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

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

Чаще всего список социальных сетей находится в 3-х частях сайта:

в шапке (header),
в подвале (footer),
в теле сайта (body) на странице с контактами.

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

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

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

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

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

Amazon,
Bandcamp,
Behance,
BitBucket,
Buffer,
CodePen,
DeviantArt,
Dribbble,
Flickr,
FlipBoard,
Foursquare,
GitHub,
Goodreads,
Google,
Google+,
Houzz,
iTunes,
Last.fm,
Line,
Linkedin,
Medium,
Meetup,
MySpace,
Одноклассники,
Patreon,
Periscope,
Pinterest,
Quora,
Reddit,
ResearchGate,
RSS,
Skype,
Snapchat,
SoundCloud,
Spotify,
Steam,
Telegram,
TikTok,
TripAdvisor,
Tumblr,
Twitch,
Twitter,
Viber,
Vimeo,
VK,
Weibo,
WhatsApp,
XING,
Yelp,
Youtube.

Чтобы добавить одну из перечисленных социальных сетей:

Читать:

Как настроить самсунг пей

Выберите строку, где должна быть кнопка соцсети.
Добавьте модуль «Социальные сети». Для этого нажмите на серый плюс.

Иконки соцсетей 1

Выберите модуль Социальные сети:

Иконки соцсетей 2

Перед вами появится меню настройки модуля. Нажмите Добавить Социальная сеть:

Иконки соцсетей 3

Из списка выберите одну социальную сеть:

Иконки соцсетей 4

Вставьте ссылку на аккаунт вашей социальной сети:

Сохраните изменения. Для этого нажмите на белую галочку в зелёном прямоугольнике.

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

Как настроить дизайн иконки

Можно настроить как общий дизайн иконок, так и проработать их внешний вид по отдельности.

Как настроить общий вид иконок

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

Иконки соцсетей 5

Перейдите в настройки модуля:

Настройте внешний вид иконок.

Контент

В блоке «Иконка» можно выбрать, как будет открываться окно социальной сети: в том же окне или в новой вкладке.

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

Также здесь можно добавить кнопку «Подписаться» для каждой иконки социальной сети. Для этого просто переведите переключатель в положение ВКЛ:

Иконки соцсетей 6

В блоке «Фон» можно создать плашку для иконок. Фон может быть как однотонным, так и с градиентом.

Иконки соцсетей 7

Дизайн

В блоке «Выравнивание» можно выбрать расположение иконок: слева, по центру или справа.

В строке «Иконка» можно настроить цвет рисунка социальной сети.

Если включить Использовать пользовательский размер иконки, появится настройка размера иконок:

Иконки соцсетей 9

Если на вкладке «Контент» вы включили кнопку подписки, во вкладке «Дизайн» в блоке «Текст» можно выбрать один из двух вариантов кнопки: светлую или темную, а также настроить тени текста:

Иконки соцсетей 10

Если вам недостаточно стандартных кнопок подписки, в блоке «Кнопка подписки» переведите переключатель «Использовать пользовательские стили для элемента» в положение ДА. Теперь вы сможете настроить размер и форму кнопки, цвет текста и фона, шрифт, тень и толщину надписи, а также отступы:

Иконки соцсетей 11

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

Дополнительно

На вкладке «Дополнительно» находятся настройки параметров для опытных веб-дизайнеров — атрибуты CSS и HTML.