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

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

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

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

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

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

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

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

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

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

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

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

CSS-код

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

.box <
text-align: center;

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

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

Читайте также:  Виртуальный номер для рекламы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также:  Nfs pro street прохождение

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

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

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

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

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

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

    Кнопки социальных сетей для сайта сделанные на чистом CSS с применением иконок Font Awesome. Посмотрите на моё решение — возможно это именно то что вы ищите.

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

    Хочу поделиться с достопочтенной аудиторий кнопками социальных сетей для сайта на чистом CSS и Font Awesome, которые я делал подгоняя стили целый день.

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

    Набор круглых кнопок

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

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

    Для тех кто плохо разбирается в HTML, подскажу что код одной кнопки соцсети состоит из трёх строк.

    Начинается он с

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

    Надеюсь с вставкой HTML-кода кнопок разберётесь.

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

    Теперь чтобы вставить ссылку на ваш профиль, канал или группу — нужно в атрибуте href вместо символа # вставить ссылку на вашу соцсеть. Будьте внимательны чтобы не удалить двойную кавычку, которая должна быть перед и в конце ссылки.

    Читайте также:  Iherb com код на скидку

    Так же обязательно добавьте CSS, чтобы ваши кнопки работали так же как в моём примере.

    Код CSS

    Первой строкой в данном css идёт подключение иконочного шрифта FontAwesome 4.7.0 через @import . Если FontAwesome уже подключен к вашему сайту, то удалите данную строку.

    CSS кнопок добавляется в файл CSS темы или шаблона вашего сайта. Место для вставки кода CSS не принципиально. Можете вставлять код в самый низ файла css с новой строки.

    Начиная со строки 15 идут стили для кнопок. Можете удалить ненужные вам соцсети.

    Например:

    Набор квадратных кнопок

    Так же если вам не нравятся круглые кнопки, предложу вариант квадратных кнопок:

    Со шрифтовыми иконками. А в чем проблема вставить иконки png просто на сайт?
    Вырезаешь отдельные элементы и вставляешь как обычные картинки

    но в таком случае лучше использовать спрайты

    Еще как вариант вы можете найти иконки в svg и поставить их.

    Тут несколько вариантов.

    Например через backgroud:

    Т.е верстка примерно такая.

    И в стилях задаете размеры для класса social__icon тк он общий для всех иконок и добавляете для разных классов т.е social__facebook иконку facebook зашифрованную в base64 или просто файл

    Т.е это будет выглядеть примерно так.
    P.S я сократил закодированную иконку, чтобы не было полотна текста.
    Иконки в svg можно взять на этом сайте, а перевести в base64 на этом сайте

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