Добавление значков социальных сетей на ваш сайт — это хороший способ установить связь с вашими клиентами через социальные сети, получить неформальную обратную связь с ними и вовлечь их в жизнь вашей компании.
Как можно добавить иконки на ваш сайт
Есть несколько способов добавить иконки социальных сетей на ваш сайт:
- Добавьте иконки в виде изображений в нужном формате .png, .svg или .eps.
- Добавьте их, используя иконки шрифтов — FontAwesome, Glyphicons и т. д.
- Реализуйте иконки, используя виджет WP.
- Добавьте иконки социальных сетей через плагин WP.
Вы можете выбрать наиболее подходящий для вас или попробовать их все.
Добавление иконок соцсетей как изображений (PNG, SVG, EPS, ETC.)
Если вы дизайнер, вы можете создавать или настраивать иконки самостоятельно. Но если вы не хотите этого делать или просто хотите сэкономить время, вы можете использовать множество сервисов, где можно выбрать пакеты иконок и скачать их.
Как добавить на сайт иконки телефона, Viber, WhatsApp, Skype, Telegram
Наиболее популярными являются:
Vecteezy
Выберите набор иконок, который больше всего соответствует вашим требованиям, и загрузите его. Затем загрузите файлы в медиатеку и добавьте их следующим образом (для HTML сайтов):
class=»social-icons»>
И добавьте стиль, чтобы настроить размер и положение иконок:
.social-icons < text-align: center; >.social-icons li < display:inline-block; list-style-type:none; -webkit-user-select:none; -moz-user-select:none; >.social-icons li a < border-bottom: none; >.social-icons li img
Flaticon
Добавьте иконки в свою коллекцию, загрузите их и включите в свой код так же, как и в предыдущем случае.
IconFinder
Вы также можете найти множество бесплатных иконок для соцсетей. Просто найдите стиль, который вам больше по вкусу, добавьте его в свой блок и наслаждайтесь ростом популярности в социальных сетях! Также, есть способ применить социальные иконки в качестве изображений SVG. Просто посмотрите на следующие примеры, чтобы увидеть, как их можно настроить:
ДОБАВЛЕНИЕ ИКОНОК СОЦСЕТЕЙ, ИСПОЛЬЗУЯ ИКОНКИ ШРИФТОВ
FontAwesome
FontAwesome, пожалуй, самый популярный значок шрифта в настоящее время. Это супер легко реализовать и использовать. Давайте посмотрим на пример.
ВКонтакте добавила новые иконки на iOS
1.Добавьте этот код в ваш HTML:
rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css»> class=»wrapper»> target=»_blank» href=»your_url_here»> class=»fa fa-3x fa-google-plus»> target=»_blank» href=»your_url_here»> class=»fa fa-3x fa-facebook-square»> target=»_blank» href=»your_url_here»> class=»fa fa-3x fa-twitter-square»>
2.Добавьте стили в свой файл style.css (вы можете добавить свои или использовать этот пример):
body < text-align: center; >.wrapper < display: inline-flex; justify-content: center; >.wrapper i < padding: 10px; text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6); transition: all ease-in-out 150ms; >.wrapper a:nth-child(1) < color: #dd4b39; >.wrapper a:nth-child(2) < color: #4867AA; >.wrapper a:nth-child(3) < color: #1DA1F2; >.wrapper i:hover
3.И вот как это работает:
Кстати, вы можете найти все другие значки в чит-листе от FontAwesome.
Примеры реализации:
Socicon
Другой способ — использовать иконку шрифта Socicon.
1.Зайдите на сайт:
2.Выберите иконки, которые вам нужны и добавьте HTML код, как показано в примере:
rel=»stylesheet» href=»https://d1azc1qln24ryf.cloudfront.net/114779/Socicon/style-cf.css?rd5re8″> class=»socicons-list»> href=’your_url_here’ target=’_blank’> class=»socicon-facebook»> href=’your_url_here’ target=’_blank’> class=»socicon-instagram»> href=’your_url_here’ target=’_blank’> class=»socicon-twitter»> href=’your_url_here’ target=’_blank’> class=»socicon-googleplus»> href=’your_url_here’ target=’_blank’> class=»socicon-behance»>
3.И примените стили, например, такие как эти:
.socicons-list < list-style: none; display: flex; justify-content: center; >.socicons-list li < margin: 30px 10px; >.socicons-list li a < text-decoration: none; padding: 30px; font-size: 30px; border-radius: 50%; color: #fff; background-color: #f1f1f1; transition: all ease-in-out 150ms; >.socicons-list li a:hover < text-shadow: 0 5px 10px #212121; >.socicons-list li:nth-child(1) a < background-color: #3e5b98; >.socicons-list li:nth-child(2) a < background-color: #c13584; >.socicons-list li:nth-child(3) a < background-color: #4da7de; >.socicons-list li:nth-child(4) a < background-color: #dd4b39; >.socicons-list li:nth-child(5) a
4.Нажмите на демо, чтобы увидеть его в действии:
РЕАЛИЗАЦИЯ ИКОНОК СОЦСЕТЕЙ С ПОМОЩЬЮ WP ВИДЖЕТА
Если ваш сайт создан на WordPress, есть отличный способ добавить блок с иконками соцсетей, используя WordPress виджет.
Короче говоря, просто посмотрите этот урок:
ДОБАВЛЕНИЕ ИКОНОК СОЦСЕТЕЙ ЧЕРЕЗ WP ПЛАГИН
Здесь вы можете просмотреть различные плагины, которые могут быть полезны при добавлении учетных записей социальных сетей на вашу страницу — Плагины WordPress для добавления иконок социальных сетей. Обратите внимание на Flying Icons | Плагин Floating Social Media Icon от Accurax, инструмент, который сэкономит много времени при добавлении иконок на ваш сайт:
Я надеюсь, что эта статья была полезна для вас, и не стесняйтесь оставлять свои комментарии относительно различных способов добавления социальных иконок!
Как монетизировать свои умения?
Теперь вы знаете, как добавлять иконки соцсетей на сайт. Эти навыки можно и нужно монетизировать: ищите заказчиков, которым нужны такие услуги. Я составила список площадок, где можно найти клиентов на веб-разработку и веб-дизайн.
Тендерные площадки
Советуем обратить внимание на специализированные площадки в сфере digital — там и регистрация простая, и бюрократии нет. Самая популярная такая площадка в Рунете — Workspace. Здесь клиенты организуют тендеры на digital-услуги, а агентства и веб-студии откликаются и участвуют в конкурсе. Неплохой способ получить достойный хорошо оплачиваемый заказ.
Биржи фриланса
Есть универсальные площадки для всех видов digital-услуг:
Есть специальные биржи для программистов и веб-дизайнеров: например, Upwork.
Соцсети, Telegram
Как и в случае с биржами, есть общие группы и каналы для поиска работы на удаленке:
- Дистанция. Фриланс, удаленная работа
- Удаленная работа: вакансии и фриланс
- ФРИЛАНС ВАКАНСИИ | УДАЛЕННАЯ РАБОТА
И профессиональные сообщества программистов и веб-дизайнеров.
Собственный блог
Свой проект можно вести везде: на своем сайте, на Хабре, Medium, YouTube и других ресурсах. Можно также писать гостевые статьи для СМИ и IT-блогов (хоть за деньги, хоть за пиар — давать ссылку на портфолио и сайт, например). Главное — чтобы контент был полезен потенциальным заказчикам, чтобы они стали к вам лояльными и обратились за оказанием услуг.
Копирайтер и человек, который отвечает за локализацию сайта TemplateMonster на русский и украинский языки. Любит читать и созерцать. Обучалась Анна на филологическом факультете в Черноморском Национальном Университете им. Петра Могилы. Владеет несколькими иностранными языками, такими как английский и немецкий.
Обожает путешествовать, в свободное время описывает лайфхаки и гиды для путешественников. Личность с активной жизненной позицией, позитивный и ответственный работник.
Источник: monsterspost.com
Как добавить социальные иконки на сайт
Доброго времени суток, уважаемые читатели блога jCover.ru. Сегодня предлагаю поговорить с Вами о том, как мы можем установить иконки социальных сетей на наш WordPress-сайт. Для этого необходимо скачать нужные и понравившиеся нам иконки. И разместить их в папке нашего сайта. Если кто-то не сможет найти их посредством поисковиков в интернете, пишите в комментарии, я помогу.
Я создал специальную для этого папку с названием minisocial (полный путь к расположенным иконкам в моем случае wp-contentthemesthemeimagesminisocial). Стоит сказать, что иконки в моем примере с расширением png, будьте внимательны.
Теперь необходимо отредактировать нашу тему WordPress. Для добавить социальные иконки на страницу любой нашей заметки нам понадобится файл single.php.
На своем блоге, на странице заметки я установил иконки семи социальных сетей.
На их примере и расскажу как это сделать самостоятельно. Для этого на странице заметки в файле single.php необходимо добавить следующие строчки (предположу, что иконки вы разместили по указанному выше адресу в папке minisocial):
Источник: jcover.ru
Иконки соц. сетей для сайта
Уже трудно себе представить современный сайт без иконок соц. сетей и мы их видим на большинстве сайтах. Откуда же берутся эти иконки? Насчет этого можно не беспокоиться, в сети распространяется огромное количество наборов бесплатных иконок на любой вкус в виде картинок.
Другой вопрос подходят ли они по стилю для вашего сайта, не отвлекают ли от контента? А сами то Вы как думаете, когда видите красно-сине-зеленые ляпистые кнопки, одинаковые на всех сайтах, как в инкубаторе.
В любом случае, если ваш сайт претендует хоть на какой-то дизайнерский стиль, то и иконки соц. сетей тоже должны стремиться к единообразию с дизайном сайта.
Иконочный шрифт Font Awesome
как нельзя кстати хорошо подходит для создания иконок соц. сетей на сайте. Давайте рассмотрим все преимущества:
- легкость внедрения в проект
- масштабируются без потери качества
- не создают http-запросов к серверу
- большой выбор векторных иконок
- легко стилизовать под свой дизайн
Сделаем HTML разметку
Создадим контейнер div с классом box, внутри которого поместим пять пунктов списка ul. В каждый пункт списка li поместим блок dlv с классом icon, внутри которых теги i с классами нужных вам иконок.
На сайте fontawesome.com, находим нужные иконки и копируем код в свой HTML-файл.
Подключаем иконочный шрифт, путем копирования строки с кодом и вставки между тегами head.
Иконки соц. сетей появились на странице, теперь предстоит их стилизация.
CSS-код
Разместим иконки в центре, для этого пропишем контейнеру с классом box код ниже.
.box text-align: center;
Убираем у списков ul маркеры и задаем отступ сверху 60 пикселей.
.box ul list-style: none;
margin-top: 60px;
>
Прорисовываем блоки списка с заданной шириной и высотой, белого цвета с рамкой под цвет фон. Она не должна быть видна в обычном состоянии, а будет появляться более темного цвета только при наведении курсора.
.box ul li width: 40px;
height: 40px;
background: #fff;
border: solid 4px #ea86c6;
>
Отобразим список в строку: display: inline-block;
На картинке иконки стоят не по центру, маленького размера и неправильного цвета.
Работа с классом icon
Опускаем иконки на 15% вниз:
Задаем цвет такой же как у фона страницы и увеличиваем размер в любых относительных единицах. Это позволит на супер больших мониторах, не потерять в качестве.
color: #ea86c6;
font-size: 1.7em;
Можно было бы на этом остановиться, но тогда зачем мы делали рамку у пунктов списка?
Hover эффект для иконок
Создадим hover эффект, при котором при наведении курсора, у рамок меняться цвет.
.box ul li:hover border: solid 4px #b63a64;
>
У иконок изменится цвет и увеличится размер:
.box ul li:hover .icon font-size: 1.5em;
color: #b63a64;
>
Демонстрация hover эффекта
Плавность hover эффекта достигается свойству transition. На codepen вы можете посмотреть, каким элементам это свойство задано.
Создано 20.06.2018 10:22:30
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Источник: myrusakov.ru