Css кнопки социальных сетей: Кнопки соцсетей для сайта на чистом CSS

01.10.2023 alexxlab

Содержание

Настройка соц. кнопок

База знаний

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

Чтобы добавить ссылки на свои страницы в социальных сетях можно использовать виджет «Кнопка-картинка» указав в нем ссылку и загрузив картинку.

Например, мы хотим добавить ссылки на социальные сети Facebook, Instagram, ВКонтакте. Данные кнопки мы разместим в меню сайта вместо email-адреса. Всего для этого есть два варианта действий.

Вариант 1

1. Для создания меню сайта используйте инструкцию «Сделать меню с нуля или воспользоваться готовыми вариантами».

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

3. Загрузим в кнопки картинки и немного изменим параметры отображения кнопок.

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

Вариант 2

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

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

Кнопки «Поделиться»

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

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

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

Альтернативный вариант настройки кнопок «Поделиться»

В интернете есть различные сервисы для создания кнопок «Поделиться». Парой из них мы и воспользуемся. Этот вариант более сложный, так как здесь требуется базовое понимание работы CSS, HTML и JavaScript.

Кнопки «Поделиться» из сервиса pluso.ru

1. Выберем кнопки, который нам нужны, на Facebook, Вконтакте и Google+, прочие кнопки удалим.

2. Ниже можно подобрать параметры отображения кнопок.

3. Ещё ниже есть поля для ввода заголовка и краткого описания страницы. Эти поля мы не будем заполнять, так как эти данные уже введены в настройках страницы, раздел «Социальные сети».

4. После настройки нужно скопировать сгенерированный код кнопок и вставить его в виджет «Вставка HTML кода», а затем опубликовать страницу или выполнить предпросмотр для просмотра результатов отображения.

5. Кнопки «Поделиться» от сервиса pluso.ru отображаются по левой стороне. Выровнять их можно добавив соответствующее CSS свойство, но если обойтись более простым вариантом, то задать определенное расположение элементу можно используя виджет «Колонки».

Кнопки «Поделиться» из сервиса usocial.pro

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

2. В личном кабинете нажмем на кнопку «Создать набор», выберем «Кнопки «Поделиться»» и настроим параметры отображения кнопок.

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

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

Иконки социальных сетей, кнопка «Мне нравится», средства массовой информации, служба социальных сетей, спрайты CSS, красный, текст, рука, угол, площадь, CSS спрайты png

Иконки социальных сетей, кнопка «Мне нравится», средства массовой информации, служба социальных сетей, спрайты CSS, красный, текст, рука, угол, площадь, CSS спрайты png

угол,
площадь,
CSS спрайты,
Палец,
рука,
как кнопка,
линия,
логотип,
СМИ,
прямоугольник,
красный,
социальные медиа,
социальная сеть,
условное обозначение,
текст,
большой палец,
png,
прозрачный,
бесплатная загрузка

Об этом PNG

Размер изображения: 1200x1200px
Размер файла: 53. 88KB
MIME тип: Image/png

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

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

ширина(px)

высота(px)

Лицензия

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

Кнопка «Мне нравится» в Facebook Кнопка «Мне нравится» в Facebook Служба социальных сетей, Facebook, синий, логотип, социальные медиа png 725x780px 431.59KB

Кнопка «Мне нравится» Facebook Социальные сети Компьютерные иконки, Share, приложение Facebook, синий, текст, рука png 1600x1600px 233.43KB
Мне нравится логотип Facebook, социальные сети, кнопка Facebook нравится, синий, текст, прямоугольник png 2686x1570px 96.65KB
org/ImageObject»> instagram, социальные сети, логотип бренда, логотип, социальные сети, средства массовой информации, 3d значок, png 450x450px 105.69KB
коммуникация, средства массовой информации, сеть, социальные, тик, ток, значок социальных сетей, png 4096x4096px 168.09KB
Кнопка «Мне нравится», кнопка «Мне нравится» в Facebook Социальные сети Кнопка «Мне нравится» в Facebook, Подписка на новости, текст, рука, большой палец Сигнал png 1693x1212px 403.87KB
Иконки социальных сетей Facebook, кнопка «Мне нравится», кнопка «Мне нравится» на Facebook, логотип, служба социальных сетей, текст, символ, круг, круг, facebook, фейсбук как кнопка png 866x650px 214.29KB
org/ImageObject»> сердце и номер 1, кнопка «Мне нравится» Компьютерные иконки Социальные сети Социальные сети Символ, социальные сети, угол, текст, прямоугольник png 512x512px 8.28KB
Facebook не нравится иллюстрация, социальные сети Facebook кнопка «Мне нравится», Facebook не нравится, синий, угол, текст png 1196x1024px 100.48KB
значок вызова значок социальных сетей значок социальных средств массовой информации, значок WhatsApp, розовый, символ, значок вызова, розовый, социальная иконка png 1244x1244px 585.75KB
семь смайликов, YouTube Социальные сети Facebook Смайлик Кнопка «Мне нравится» на Facebook, смайлик, социальные медиа маркетинг, компьютерные иконки png 672x672px 58.85KB

org/ImageObject»> средства массовой информации, сеть, социальные сети, социальные сети, тикток, значок социальных сетей, png 4096x4096px 147.31KB
красный значок с логотипом, социальные сети Сигнал большого пальца Facebook кнопка «Мне нравится» Кнопка «Мне нравится», социальные сети, угол, текст, прямоугольник png 653x425px 24.24KB
Facebook AddThis Социальные сети Кнопка «Мне нравится» Значок, логотип Facebook, синий, cdr, прямоугольник png 710x739px 66.57KB
Социальные сети Сигнал большого пальца Кнопка «Мне нравится» Facebook, Facebook как, угол, текст, прямоугольник png 1000x857px 43.02KB
белое сердце, Любовь Социальные сети Кнопка «Мне нравится» Смайлик «Эмодзи», «Мне нравится», текст, сердце, логотип png 850x850px 24. 41KB
Кнопка «Мне нравится» на Facebook Кнопка «Мне нравится» на Facebook Социальная сеть News Feed, Facebook, смайлик, большой палец Сигнал, социальные медиа png 1024x512px 51.65KB
Кнопка «Мне нравится» на Facebook, Кнопка «Мне нравится» на Facebook Кнопка «Мне нравится» на Facebook Социальные сети Иконки компьютеров, кнопка регистрации, синий, текст, рука png 2362x2362px 110.9KB
Логотип Facebook, кнопка социальных сетей Facebook как кнопка Компьютерные иконки кнопка Facebook, социальные сети, торговая марка, логотип, интернет png 512x512px 23.96KB

Кнопка «Мне нравится» на Facebook Кнопка «Мне нравится» на Facebook Реклама в социальных сетях Блог, голосование, Разное, синий, угол png 2126x1701px 209. 67KB
Значки социальных сетей Facebook, служба социальных сетей, кнопка «Мне нравится», кнопка «Мне нравится» в Facebook, смайлик, желтый, круг, область, площадь, круг, смайлик png 512x512px 16.24KB

Значки социальных сетей Facebook, Youtube, кнопка «Мне нравится», кнопка «Мне нравится» в Facebook, служба социальных сетей, логотип, зеленый, желтый, площадь, facebook, фейсбук как кнопка png 609x737px 5.96KB
красный значок уведомления о сообщении, социальные сети YouTube кнопка «Мне нравится» Hashtag Blog, лайки, текст, прямоугольник, оранжевый png 1583x794px 190.08KB
Facebook, социальные сети, кнопка «Мне нравится», реклама в социальных сетях, «серый значок», Разное, синий, текст png 949x949px 33. 35KB
Нравится в Instagram, Комментарий в Instagram, Подписчик в Instagram, Кнопки взаимодействия, Кнопка Like, Новый друг, Профиль в социальных сетях, Общение в социальных сетях, Взаимодействие с социальными сетями, png 1280x1280px 81.14KB
Социальные сети Иконки компьютеров Facebook Кнопка «Мне нравится» Социальные сети, социальные сети, прямоугольник, логотип, социальные медиа png 540x540px 4.15KB

средства массовой информации, социальные сети, vk, vkontakte, значок социальных сетей, png 4096x4096px 135.41KB
лого, средства массовой информации, социальная сеть, твич, значок социальных сетей, png 4096x4096px 151.69KB
org/ImageObject»>

Иконки социальных сетей Facebook, Служба социальных сетей, Логотип, Маркетинг влияния, Дизайн Иконок, Блог, Красный, Текст, блог, площадь, круг png 512x512px 13.04KB
Иконка Pinterest, Социальные сети Иконки компьютера Иконка «Мне нравится», логотип Free Pinterest, Разное, текст, товарный знак png 512x512px 34.19KB
Маркетинг в социальных сетях Средства массовой информации Связь, социальные сети, угол, текст, связи с общественностью png 840x1371px 188.83KB
Компьютерные иконки Instagram Социальные сети Кнопка «Мне нравится» Значок «Поделиться», Instagram, логотип, социальные медиа, пурпурный png 512x512px 112.66KB
Социальные медиа Сигнал большого пальца Кнопка «Мне нравится» Компьютерные иконки Символ, Недурно, текст, рука, прямоугольник png 512x512px 14. 43KB
Кнопка «Нравится» на Facebook Социальные сети Кнопка «Нравится» на Facebook Социальные сети, социальные сети, синий, угол, социальные медиа маркетинг png 597x780px 63.85KB
обведен, средства массовой информации, сеть, социальные сети, социальные сети, you tube, youtube, социальные сети — Sharp Multicolor icon, png 4096x4096px 196.03KB
Иконки в социальных сетях, Маркетинг в социальных сетях, Символ, Коммуникации, Дизайн иконок, Средства массовой информации, Социальные сети, Реклама в социальных сетях, Текст, Черно-белое, площадь, Черное и белое, связь png 840x980px 56.51KB
Иконка в социальных сетях, реклама в социальных сетях, служба социальных сетей, маркетинг в социальных сетях, общение, Facebook, Linkedin, маркетинг в социальных сетях, реклама, площадь, связь png 1200x550px 81. 16KB
Кнопка «Мне нравится» в Facebook Социальные сети Facebook, Inc., социальные сети, синий, угол, текст png 500x500px 24.94KB
Маркетинг в социальных сетях Средства массовой информации Цифровой маркетинг, социальные сети, текст, логотип, социальные медиа маркетинг png 900x900px 274.77KB
Маркетинг в социальных сетях Средства массовой информации Сообщество, социальные сети, текст, команда, монохромный png 1280x640px 91.02KB
Маркетинг в социальных сетях Кнопка «Мне нравится» Маркетинг в социальных сетях Instagram, социальные сети, сервис, прямоугольник, логотип png 768x768px 238.58KB
org/ImageObject»> Значки социальных сетей Facebook, кнопка «Мне нравится» в Facebook, сигнал большого пальца, стикер, социальная сеть, продвижение по службе, значки «пин», красный, площадь, кнопка, facebook png 600x527px 43.53KB
pinterest, общение, средства массовой информации, сеть, пинтер, социальные сети, значок чата в социальных сетях, png 4096x4096px 285.13KB
Социальные сети Иконки компьютеров Facebook Кнопка «Мне нравится» LinkedIn, социальные сети, текст, товарный знак, логотип png 900x900px 35.73KB
Значки социальных сетей Facebook, кнопка «Мне нравится», служба социальных сетей, стикер, блог, текст, черно-белое изображениеЛоготип, блог, площадь, Черное и белое png 500x500px 17.98KB
org/ImageObject»> YouTube Facebook кнопка «Мне нравится» Компьютерные иконки Социальные сети, YouTube, текст, логотип, социальные медиа png 700x365px 57.62KB
Коммуникация, Подключение, Глобальный, Люди, Иконки, Средства массовой информации, Сеть, Сетевые значки, Социальные, png 1280x898px 454.43KB
Маркетинг в социальных сетях Средства массовой информации Компьютерные иконки Управление, социальные медиа, веб-дизайн, сервис, логотип png 980x984px 60.98KB
Иконки социальных сетей Facebook, Socialmediamanager, Маркетинг, Instagram, Маркетинг в социальных сетях, Linkedin, Текст, Линия, площадь, связь, facebook png 1024x1024px 777.35KB
Кнопка «Мне нравится» Facebook, Inc. Социальные сети Реклама в социальных сетях, Facebook, синий, логотип, социальные медиа png 600x600px 7.3KB

30+ Иконок социальных сетей Perfect CSS (бесплатная загрузка)

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

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

Автор: matt henley (mattbhenley)

Ссылки: Исходный код / Демо

Создано: 20 октября 2018 г.

90 005 Сделано с помощью: HTML, SCSS

2. Социальные иконки SVG

Просто тестирование некоторых значков SVG с использованием «символа»

Автор: Кевин Дьюар (eskside_design)

Ссылки: Исходный код / Демо

Дата создания: 13 марта 2015 г.

9000 5 Сделано с помощью: HTML, SCSS

Теги: svg , social, icons, css

3.

Dark Social Icons

Автор: Метти (Metty)

Ссылки: Исходный код/Демо

Создано: Ноябрь 18, 2018

Сделано с использованием: HTML, CSS

4. Стильные социальные кнопки

Несколько классных социальных кнопок с плавной анимацией. Вдохновлено https://dribbble.com/shots/1674790-Infinity-Icon-iOS-7

Автор: Chris Deacy (chrisdothtml)

Ссылки: Исходный код / Демо, Dribbble

900 05 Дата создания : 20 марта 2015 г.

Сделано с: Pug, Stylus

Препроцессор CSS: Stylus

Препроцессор JS: Нет

Препроцессор HTML: Pug

Теги: CSS, кнопки, анимация, социальные сети

5. Социальные кнопки с подсказками 9 0003

Автор: Луис Эспиноса ( Limbian)

Ссылки: Исходный код / Демо

Создано: 29 августа 2016 г.

Сделано с помощью: Мопс, SCSS

900 09 Препроцессор CSS: SCSS

Препроцессор JS: Нет

Препроцессор HTML: Мопс

009 Ссылки:

Исходный код / Демо

Дата создания: 28 сентября 2018 г.

Сделано с помощью: HTML, CSS

7. Плавающие иконки социальных сетей CSS

Автор: Stockin (Стокин)

900 09 Ссылки: Исходный код / Демо

Создано: 27 сентября 2018 г.

Сделано с помощью: HTML, CSS

8. Минимальные иконки социальных сетей с всплывающими заголовками

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

Автор: Киран Хантер (kieranfivestars)

Ссылки: Исходный код / демо

Создано: 13 ноября 2014 г.

Сделано с: HTML, CSS, J С

Теги: social, icons, hover, title, css

9.

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

Просто еще один ящик для ваших социальных ссылок 5 Ссылки: Источник Код / Демо
Создано: 13 февраля 2018 г.
Сделано с: HTML, SCSS
Теги: ящик, 3d, css, социальные
9000 2 10. SVG Social Icons
Просто тестирую Значки SVG с использованием «символа»
Автор: Кевин Дьюар (eskside_design)
Ссылки: Исходный код / Демо
Дата создания: 13 марта 2015 г.
9000 5 Сделано с помощью: HTML, SCSS
Теги: svg , социальные, иконки, css
11. Стильные социальные кнопки
Несколько классных социальных кнопок с плавной анимацией. Вдохновлено https://dribbble.com/shots/1674790-Infinity-Icon-iOS-7
Автор: Chris Deacy (chrisdothtml)
Ссылки: Исходный код / Демо
Создано: 20 марта 2015 г.
Сделано с помощью: Pug, Stylus 9000 6
Препроцессор CSS: Stylus
Препроцессор JS: None
Препроцессор HTML: Pug
Теги: css, кнопки, анимация, социальные сети
12. Отображение значков социальных сетей с переходом
900 09 Автор: Stefan Göllner (goellner)
Ссылки: Исходный код / Демо
Создано: 17 июня 2013 г.
Сделано с: HTML, SCSS 900 06
13. Ссылки куба с учетом направления только с помощью CSS
Редактировать: я написал пост о том, как это сделать! Проверьте это здесь. Они немного чувствительны к триггерам, но когда я сделал их менее чувствительными, я потерял интересные повороты, которые вы получаете на каждом углу. Я решил, что они лучше как есть.
Автор: Gabrielle Wee 🧧 (gabriellewee)
Ссылки: Исходный код / Демо
Создано: 20 января 2017 г.
Сделано из: Haml, SCSS
CSS Pre- процессор: SCSS
Препроцессор JS: Нет
Препроцессор HTML: Haml
Теги: css, анимация, куб, 3d, ссылка
9 0002 14. Чистые социальные кнопки — БЕСПЛАТНО
Любой может использовать эти кнопки! Мне не нужны никакие похвалы… Просто сделай что-нибудь крутое!
Автор: Michael Rossi (michaelrossi)
Ссылки: Исходный код / Демо
Дата создания: 21 октября 2015 г.
9000 5 Сделано с: HTML, Меньше
Метки: соц. , кнопки, социальные кнопки
15. Social Connect
Это дизайн, который я нашел на Dribbble, созданный Полом Флавием Нечита. Это простой дизайн, но он один из моих любимых. Мне придется немного поработать, чтобы получить тени так, как показано на картинке. https://dribbble.com/shots/2252572-Day-083-Social-Connect
Автор: Anthony Koch (anthonykoch)
Ссылки: Исходный код / Демо, страница Dribbble
Создано: 23 октября 2015 г.
Сделано с: HTML, Sass, Babel
Теги: social-icons, dribbble
16. Социальные ссылки — Только Css — Анимация
Автор: Stockin (Stockin)
Ссылки: Исходный код / Демо
Дата создания: 23 января 2019 г.
Сделано с помощью: HTML, CSS, JS
17. CSS иконки социальных сетей — 3D иконки с эффектом наведения
Автор: sweety (sty24)
90 005 Ссылки: Исходный код / Демо
Создано: 19 декабря 2018 г.
Сделано с помощью: HTML, CSS
Теги: анимация, социальные, кнопки, 3d, css
1 8.
Иконки социальных сетей CSS
Социальные сети Иконки с использованием Pure CSS и потрясающей библиотеки шрифтов. Создан на основе иконок социальных сетей Valli’s Pen CSS.
Автор: Мухаммет Хайран (хайран)
Ссылки: Исходный код / Демо
Создано: 8 июня 2015
Сделано с: HTML, CSS
Теги: css
19. Иконки социальных сетей
Просто маленькие кнопки социальных сетей с красивой анимацией
Автор: Joe Vengels (JbvGaming)
Ссылки: Исходный код / Демо
Создано: 16 апреля 2014 г.
Сделано с помощью: HTML, CSS, JS
Теги: социальные сети, значок, css3, кнопка, анимация
20. Иконки социальных сетей в Css
подключаемые, удобные для мобильных устройств css иконки социальных сетей
Автор: Michael Ward (h4xc0ntr0l)
Ссылки: Исходный код / Демо 90 006
Дата создания: 6 октября 2015 г.
Сделано с помощью: HTML, CSS
Теги: css, социальные сети, иконки, плагины, адаптивные
21. Иконки социальных сетей с шрифтом Awesome
90 005 Создание цветных иконок для социальных сетей с потрясающим шрифтом и начальной загрузкой.
Автор: Bryan McDonald (bryanmcdee)
Ссылки: Исходный код / Демо
Создано: 3 февраля 2015 г.
9 0005 Сделано из: HTML, CSS
Теги: fontawesome, icons, social-media-icons
22. Придумайте эти иконки социальных сетей!!!
Альтернативные идеи простому использованию скучных иконок социальных сетей. Использует FontAwesome.
Автор: Тихаона Брендон Найке (lytwalker)
Ссылки: Исходный код / Демо
Создано: 12 июля 2016 г.
Сделано с помощью: HTML, SCSS
Теги: font-awesome, css3, css-animations, наконец-то закончил то, что я начал некоторое время назад
23. Иконки социальных сетей
Иконки социальных сетей. 🙂
Автор: Марти (Marty-Development)
Ссылки: Исходный код / Демо
Создано: 21 мая 2020 г.
9000 5 Сделано с: HTML, CSS
Теги : социальные сети, значок социальных сетей, кнопка социальных сетей, значок социальных сетей css
24. Иконки социальных сетей HTML CSS
Автор: Vishal Amipara (vishalamipara)
Ссылки: Исходный код / демо
Создано: 28 января , 2020
Сделано с помощью: HTML, CSS
Теги: социальные медиа, социальные медиа html, социальные медиа css, значок социальных медиа, значок социальных сетей
25.
Чистый CSS и шрифт Awesome Social Media Icon
Автор: Poonam Khatri (poonam691)
Ссылки: Исходный код / Демо
Создано: 11 апреля 2019 г.
Сделано с: HTML, CSS
Теги: потрясающий шрифт, значок социальных сетей, значок CSS
26. Кнопки социальных сетей CSS с красивой анимацией
Просто маленькие кнопки социальных сетей с красивой анимацией
Автор: Joe Vengels (JbvGaming)
Ссылки: 9001 0 Исходный код / Демо
Создано: 16 апреля 2014 г.
Сделано с: HTML, CSS, JS
Теги: социальные, значок, css3, кнопка, анимация
2 7. Pure Css Эффекты наведения в социальных сетях
3d анимация переворота карты
Автор: Омар Байомай (Эль-Байо)
Ссылки: Исходный код / Демо
Создано: 13, 20 июля 17
Сделано с помощью: HTML, CSS
Теги: кнопки социальных сетей
28.
Страница памяти FreeCodeCamp
Автор: Анжелика Николь Абалос (angelicanicolle)
Ссылки: 90 010 Исходный код / Демо
Создано: 22 ноября, 2017
Сделано с помощью: HTML, CSS
Настройка размера социальных значков
Вы можете настроить размер социальных значков на верхней панели темы Beaver Builder, в заголовке Nav Bottom или нижнем колонтитуле с помощью CSS в этом статья.
Социальные значки, используемые в теме Beaver Builder, взяты из набора значков Font Awesome, за исключением значка Blogger. Если вы хотите включить значок Blogger в свой набор значков социальных сетей, в конце статьи есть дополнительные правила CSS для этого значка.
Узнайте, как настроить значки социальных сетей в макете верхнего или нижнего колонтитула и как добавить правильные ссылки на свои социальные сайты.
Чтобы настроить размер значков социальных сетей:
Добавьте одно из приведенных ниже правил CSS в зависимости от того, где отображаются значки социальных сетей.
См. статью о том, куда добавить код CSS.
Нажмите Сохранить и опубликовать .
Для значков верхней панели:
Отрегулируйте верхнее, правое, нижнее и левое поля в строке 3, чтобы при необходимости добавить дополнительное пространство между значками и верхней и нижней частью верхней панели. Измените размер шрифта в строке 6 на нужный размер и отрегулируйте расстояние между значками в строке 7, если необходимо, с помощью атрибута width .
/* Изменение размера и положения социальных иконок Font Awesome на верхней панели */
.fl-page-bar .fl-social-icons {
margin: 10px 0 5px 0;
}
.fl-page-bar .fl-social-icons i.fab {
размер шрифта: 40px;
ширина: 60px !важно;
}

Для значков заголовков:
Измените размер шрифта в строке 3 на нужный размер и отрегулируйте расстояние между значками в строке 4, если необходимо, с помощью атрибута ширина . Измените значение в строке 7, если вам нужно отрегулировать выравнивание значков по правому краю.
/* Изменение размера и положения социальных значков Font Awesome в заголовке Nav Bottom */
.fl-page-header-primary .fl-social-icons .fa-stack {
размер шрифта: 30px;
ширина: 80 пикселей;
}
.fl-page-header-content .fl-social-icons {
margin-right: 20px !important;
}

Для значков нижнего колонтитула:
Измените размер шрифта в строке 3 на нужный размер и отрегулируйте расстояние между значками в строке 4, если необходимо ширина атрибут.
/* Изменение размера и положения социальных иконок Font Awesome в нижнем колонтитуле */
.fl-page-footer .fl-social-icons .fa-stack {
размер шрифта: 30px;
ширина: 80 пикселей;
}

Если вы выбрали значок Blogger для отображения в списке, CSS будет более сложным, поскольку значок Blogger не является частью набора Font Awesome. Он использует другой класс CSS, и после того, как вы установите размер, его положение относительно других социальных значков необходимо настроить по-разному.
Добавьте следующие правила CSS к предыдущему набору, если вы используете и значки Font Awesome, и значок Blogger. Если вы используете только значок Blogger, используйте только эти правила.
Значок блоггера на верхней панели:
Измените размер шрифта в строке 3 на нужный вам размер.
/* Изменение размера и положения значка социальной сети Blogger на верхней панели */
.fl-page-bar .fl-social-icons .fl-icon {
font-size: 50px;
}

Значок блоггера в заголовке:
Измените размер шрифта в строке 3 на нужный размер и при необходимости отрегулируйте расстояние между значками Font Awesome и Blogger в строке 4. Отрегулируйте верхнее значение в строке 6, чтобы выровнять значок Blogger по вертикали с другими значками социальных сетей.