Товаров: 0 (0р.)

Иконки соцсетей для сайта html: Красивые кнопки соцсетей с различными эффектами | html, css и javascript (jQuery)

Содержание

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

Вы здесь: Главная — 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.

Если Вы не хотите пропустить новые материалы на сайте,

то Вы можете подписаться на обновления: Подписаться на обновления

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

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

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

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

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

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Топ 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 — бит

Скачать

Много бесплатных иконок социальных сетей в стиле Flat

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

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

Спасибо http://www.cssauthor.com и рекомендую:

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

Скачать

16 социальных иконок в PSD

Скачать

Социальные Flat иконки с закругленными углами

Скачать

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

Скачать

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

Скачать

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

Скачать

20 бесплатных социальных иконок с длинной тенью

Скачать

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

Скачать

Flat иконки социальных закладок

Скачать

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

Скачать

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

Скачать

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

Скачать

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

Скачать

Очень красивые и стильные Flat иконки сетей

Скачать

Круглые иконки сетей и приложений в Flat

Скачать

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

Скачать

Множество плоских иконок медиа в круглом и квадратном виде

Скачать

30 Flat иконок социальных сетей и популярных сервисов

Скачать

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

Скачать

Плоские и зелёные иконки социальных сетей в Flat

Скачать

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

Скачать

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

Скачать

Минималистическая подборка белых социальных иконок

Скачать

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

Скачать

Flat иконки на CSS

Скачать

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

Скачать

42 стильных и крутых иконок сетей в Flat и с длинной тенью

Скачать

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

Скачать

Оформляем кнопки соц сетей для сайта

Как Вы думаете, можно ли совместить кнопки социальных сетей и изображения? Чтобы и то и другое смотрелось очень красиво и креативно. Да, можно это сделать очень интересным способом. И даже не одним, а несколькими. А если быть точнее, то в статье Вы найдете 12 способов сделать классные эффекты для кнопок социальных сетей при наведении на изображение. В некоторых случаях необходимо не просто наведение, а еще и клик мыши, что также добавляет интерактива. Необычный способ выделить свой сайт, используя именно такие эффекты при наведении на изображение.

Все 12 примеров смотрите и скачивайте по ссылке ниже:

Смотреть примерыСкачать

Кстати, по поводу эффектов при наведении, на сайте по этой теме есть еще парочка статей:

Понравился эффект — используйте!

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

(наведите на изображение)

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

Шаг 1 — HTML

Для иконок, которые Вы видите на кнопках социальных сетей, используется FA (Font Awesome). Подключаются эти иконки одной строкой между блоками <head></head>:

HTML КОД

1

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

После того, как Вы скачали все исходники, необходимо выбрать понравившийся эффект. Мой эффект находится в файле index.html. В этом же файле находятся и все необходимые стили для того, чтобы создать эффект при наведении.

Копируем оттуда блок со всеми кнопками социальных сетей и изображениями. Этот блок <div> находится под список меню со всеми эффектами. В моём случае этот блок имеет такой вид:

HTML КОД

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div>
    <div>
        <a href="#">
            <i></i>
            Вконтакте
        </a>
        <a href="#">
            <i></i>
            Facebook
        </a>
        <a href="#">
            <i></i>
            Twitter
        </a>
    </div>
 
    <div>
        <img src="images/tree.jpg" alt="California surf">
    </div>
</div>

Вся необходимая структура есть. Осталось задать только стили в CSS. Поэтому переходим ко 2-му и, одновременно, последнему шагу.

Шаг 2 — CSS

Стили находятся в каждом HTML файле между блоками <head></head>. То есть в каждом файле с разными эффектами, в этом блоке вверху документа находятся соответствующие стили.

Вам необходимо взять эти стили и поместить их в Ваш файл стилей:

CSS КОД

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

.image-effect-fall-back {
    width: 500px;
    height: 300px;
    position: relative;
    margin: 0 auto;
    -webkit-perspective: 800px;
    perspective: 800px;
}
 
.image-effect-fall-back .image-layer{
    position: absolute;
    top:0;
    left: 0;
    height: 300px;
    -webkit-transition: 0.6s;
    transition: 0.6s;
    z-index: 1;
}
 
.image-effect-fall-back:hover .image-layer{
    -webkit-transform: rotateX(70deg);
    transform: rotateX(70deg);
    overflow: visible;
}
 
.image-effect-fall-back .image-layer img{
    height: 100%;
}
 
.image-effect-fall-back .image-layer:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
    opacity: 0;
 
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transform: rotateX(114deg) translateZ(-26px)  translateY(110px) scale(0.75);
    transform: rotateX(114deg) translateZ(-26px)  translateY(110px) scale(0.75);
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
}
 
.image-effect-fall-back:hover .image-layer:before {
    opacity: 0.3;
}
 
.image-effect-fall-back .share-layer{
    position: absolute;
    bottom: 100px;
    left: 0;
    width: 100%;
    height: 100px;
    opacity: 0;
    z-index: 10;
 
    -webkit-transition: 0.6s;
    transition: 0.6s;
 
    -webkit-transform: rotateX(70deg);
    transform: rotateX(70deg);
}
 
.image-effect-fall-back:hover .share-layer {
    opacity: 1;
 
    -webkit-transform: rotateX(0deg) translateY(-70px);
    transform: rotateX(0deg) translateY(-70px);
}
 
/*стили для всех кнопок*/
.share-button{
    display: inline-block;
    text-decoration: none;
    color: #ffffff;
    padding: 12px;
    width: 90px;
    border-radius: 2px;
    margin:	25px 10px;
}
 
/*цвет кнопок социальных сетей*/
.share-via-vk {
    background-color:#4C75A3;
}
 
.share-via-facebook {
    background-color:#3b5998;
}
 
.share-via-twitter {
    background-color:#00aced;
}

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

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

Вывод

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

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

Правильные социальные share-кнопки / Хабр

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

Внешний вид


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

Быстродействие


В пору быстрого интернета все меньше приходится задумываться об оптимизации скорости загрузки сайта. Однако с каждым годом растет количество пользователей мобильного интернета, который пока не может похвастаться высокими скоростями. А социальные кнопки способны заметно замедлить загрузку сайта. Интересный факт: еще в 2007 году Amazon сообщил, что каждые лишние 100мс при загрузке сайта снижают продажи на 1%. А Google с 2010 года учитывает скорость загрузки при ранжировании сайтов в поисковой выдаче. И хочется ли после этого ставить нативные кнопки?

 Что же делать?


К счастью, есть много сервисов, с помощью которых можно установить к себе на сайт одну кнопку «Поделиться», объединяющую сразу все нужные социальные сети. Самым популярным в Рунете подобным инструментом является блок «Поделиться» от Яндекса. И он действительно хорош: аккуратные иконки, лаконичный код и даже наличие API для разработчиков. Но как всегда, хочется чего-то большего. Для себя я определил вот какие критерии идеального сервиса социальных кнопочек:
  • Наличие российских социальных сетей
  • Быстрая и гибкая кастомизация блока
  • Счетчик, суммирующий нажатия по иконкам всех сервисов
  • Возможность отправлять страницу в Evernote, по почте, добавлять в закладки, а также печатать.
  • Надежность

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

А какими сервисами социальных кнопок пользуетесь вы?

Социальные кнопки на HTML / CSS3

Социальные кнопки на HTML / CSS

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

See the Pen EbdgoN by Denis (@Dwstroy) on CodePen.

Разметка социальной панели в HTML

Первым делом создадим каркас социальной панели. Чтобы не писать html разметку с нуля я его скопировал с предыдущего урока «Как создать форму в CSS3», в уроке я показывал, как подключать иконки на страничке и красиво оформить.

Скачайте архив с урока на компьютер и разархивируйте. В папке найдете стили и шрифты иконок, которые подключали в предыдущем видео с данного ресурса fontawesome.io.

В папке img расположена картинка на задний фон, в css папке файл style.css в которой подключили картинку, font-awesome.css  содержит стили иконок, в папке fonts их шрифты, а в index.html это все подключено, остается только описать саму разметку.


Я переносу все файлы в IDE редактор PhpStorm в котором буду описывать код, а вы можете их редактировать прям через блокнот.

Открываем файл index.html, в head описано подключение стилей и иконок, тут я думаю все предельно понятно. Между тегами body открываем <div>  с классом социал .social, который будет являться нашей оберткой кнопок. 

В нутрии создадим, блок <div> с классом .dws-button, второй класс пропишем начальный суффикс dws-, этот блок продублируем шесть раз, в нем разместим ссылку с атрибутом target=_blank чтобы она открывалась в новой вкладке, затем в ней идет блок div с классом dws-share, в нем делаем список для иконки с классом .fa и приставкой второго класса fa- с атрибутом aria-hidden=true за ним добавляем блок с классом .div.dws-text

Затем отберем иконки, которые задействуем под социальную панель. Переходим на сайт fontawesome.io/icons и выписываем название иконок, которые будем использовать.

  • facebook
  • vk
  • twitter
  • youtube
  • odnoklassniki
  • envelope-o

Вставляем ссылки и прописываем количество подписчиков. 

<div>
   <div><a href="https://www.facebook.com/DWstroy-1415456785391372/" target="_blank">
      <div><i aria-hidden="true"></i></div>
      <div>51</div>
   </a></div>
   <div><a href="https://vk.com/dwstroy" target="_blank">
      <div><i aria-hidden="true"></i></div>
      <div>730</div>
   </a></div>
   <div><a href="#">
      <div><i aria-hidden="true"></i></div>
      <div></div>
   </a></div>
   <div><a href="https://www.youtube.com/channel/UCTgx8cZRD5Jz2_zGaT27S3w" target="_blank">
      <div><i aria-hidden="true"></i></div>
      <div>1299</div>
   </a></div>
   <div><a href="#">
      <div><i aria-hidden="true"></i></div>
      <div></div>
   </a></div>
   <div><a href="mailto:[email protected]">
      <div><i aria-hidden="true"></i></div>
      <div></div>
   </a></div>
</div>

Затем приступим к оформлению стилей.

Открываем style.css, от позиционируем блок .social. 

.social{
 position: fixed;
 top: 200px;
 left: 0;
 z-index: 1000;
}

Затем предадим кнопке внешний вид, указываем высоту и ширину, сделаем небольшие отступы. Зададим уменьшение ширины блока кнопки до 40 пик и скроем все, что вылезает за ее пределы при помощи overflow:hidden;. Придаем кнопке анимацию при помощи transition: all 0.5s; и прижимаем ее к левому краю меняя параметр у класса .social left=0. 

.dws-button{
 background-color: #3b5998;
 width: 40px;
 height: 25px;
 padding: 5px;
 overflow:hidden;
 transition: all 0.5s;
}

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

a{
 color: #fff;
 text-decoration:none;
}

Увеличим иконки на 25 пик. и от центруем их по середине. Чтобы они встали по центру, напишем что это блочный элемент. 

a i.fa {
 font-size: 25px;
 text-align: center;
 display: block;
}

Сделаем обтекание у иконок при помощи float:left и укажем ширину в 40 пик. 

.dws-share{
 float: left;
 width: 40px;
}

Текст прижмем к правой стороне, увеличим его на 20 пик. и отпозиционируем его по центру строки. 

.dws-text{
 float: right;
 font-size: 20px;
 position: relative;
 top: 2px;
 right: 5px;
}

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

.dws-facebook {background-color: #3b5998;}
.dws-vk {background-color: #507299;}
.dws-twitter {background-color: #33bdf1;}
.dws-youtube {background-color: #e62117;}
.dws-odnoklassniki {background-color: #ee8208;}
.dws-envelope-o {background-color: #656766;}


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

.dws-button:hover{
 background-color: #000;
 width: 50px;
 padding-left: 15px;
}

Получилось следующее. Добавим при наведении для блоков с текстом ширину. 

.dws-facebook:hover{width:75px;}
.dws-vk:hover,.dws-youtube:hover{width:95px;}


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

Кому понравилось видео, обязательно поделись им в социальных сетях.

Оставить комментарий:

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

В настоящее время вы используете старую версию браузера, и ваш опыт работы может быть не оптимальным. Пожалуйста, подумайте об обновлении. Учить больше. ImagesImages homeCurated collectionsPhotosVectorsOffset ImagesCategoriesAbstractAnimals / WildlifeThe ArtsBackgrounds / TexturesBeauty / FashionBuildings / LandmarksBusiness / FinanceCelebritiesEditorialEducationFood и DrinkHealthcare / MedicalHolidaysIllustrations / Clip-ArtIndustrialInteriorsMiscellaneousNatureObjectsParks / OutdoorPeopleReligionScienceSigns / SymbolsSports / RecreationTechnologyTransportationVectorsVintageAll categoriesFootageFootage homeCurated collectionsShutterstock SelectShutterstock ElementsCategoriesAnimals / WildlifeBuildings / LandmarksBackgrounds / TexturesBusiness / FinanceEducationFood и DrinkHealth CareHolidaysObjectsIndustrialArtNaturePeopleReligionScienceTechnologySigns / SymbolsSports / RecreationTransportationEditorialAll categoriesEditorialEditorial главнаяРазвлеченияНовостиРоялтиСпортМузыкаМузыка домойПремиумBeatИнструментыShutterstock EditorМобильные приложенияПлагиныИзменение размера изображенияКонвертер файловСоздатель коллажейЦветовые схемыБлогГлавная страница блогаДизайнВидеоКонтроллерНовости
PremiumBeat blogEnterprisePric ing

Войти

Зарегистрироваться

Меню

ФильтрыОчистить всеВсе изображения
  • Все изображения
  • Фото
  • Векторы
  • Иллюстрации
  • Редакция
  • Видеоряд
  • Музыка
  • Поиск по изображению

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

Сортировать по

Наиболее подходящие

Свежие материалы

Тип изображения

Виджет социальных иконок — Поддержка — WordPress.com

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

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

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

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

Содержание

Виджет социальных иконок

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

↑ Содержание ↑

Добавить виджет социальных иконок
  1. Зайдите на Мои сайты → Дизайн → Настройка → Виджеты
  2. Выберите область виджетов, в которую вы хотите добавить значки социальных сетей, и нажмите Добавить виджет .
  3. Найдите виджет «Социальные значки» и щелкните заголовок, чтобы добавить его.
    Примечание. Если вы установили плагины, вы увидите (Jetpack) в конце заголовка виджета Social Icons.
  4. Выберите заголовок для вашего виджета.
  5. Выберите размер значков социальных сетей: маленький, средний или большой.
  6. Добавьте полную ссылку (URL) на свой первый профиль в социальной сети. Например, https://www.facebook.com/WordPresscom/
    7. .
  7. Если вы хотите добавить дополнительные значки социальных сетей, нажмите Добавить значок и добавьте URL своего следующего профиля в социальной сети.
  8. Когда вы закончите добавлять ссылки на свой профиль в социальных сетях, нажмите «Опубликовать», чтобы сохранить изменения.

Ваши блестящие новые значки социальных сетей теперь на вашем сайте!

↑ Содержание ↑

Изменение порядка значков

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

↑ Содержание ↑

Доступные значки

Мы поддерживаем значки для различных сетей.

Проверьте здесь список доступных значков.

500 пикселей

Amazon

Яблоко

Bandcamp

Behance

CodePen

DeviantArt

Digg

Дриббл

Dropbox

Адреса электронной почты (если ваш адрес электронной почты [email protected], введите mailto: [email protected] в поле URL-адрес учетной записи )

Etsy

Facebook

Flickr

Foursquare

Goodreads

Google+

Google

GitHub

Instagram

iTunes

LinkedIn

Средний

Встреча

Pinterest

Карман

Равелри

Reddit

RSS-каналы

Skype

SlideShare

Snapchat

SoundCloud

Spotify

StumbleUpon

Tumblr

Twitch

Твиттер

Vimeo

ВК

WordPress

Yelp

YouTube

↑ Содержание ↑

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

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

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

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

Загрузите значок в свою медиа-галерею

  1. Перейти на Мой сайт → Сайт → Мультимедиа → Добавить новый
  2. Перейдите в папку на вашем компьютере, где вы сохранили изображения, которые хотите использовать в качестве значков.
  3. Загрузите значки в свою галерею мультимедиа.

Получите ссылку на значок социальной сети

  1. Перейти на Мой сайт → Сайт → Медиа .
  2. Щелкните изображение загруженного значка социальной сети и щелкните Edit.
  3. В разделе URL щелкните Копировать , чтобы сохранить ссылку в буфер обмена вашего компьютера.
  4. Нажмите Готово , чтобы выйти из редактора мультимедиа.

Шаг 2 . Добавьте виджет «Текст» или виджет «Пользовательский HTML» и отформатируйте кнопки с помощью HTML.

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

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

  1. Перейдите в Мои сайты → Дизайн → Настройка → Виджеты .
  2. Выберите область виджетов, в которой вы хотите разместить значки.
  3. Щелкните Добавить виджет и найдите текстовый виджет или пользовательский виджет HTML
  4. Щелкните имя виджета, чтобы добавить виджет.

Добавить пользовательский виджет социальных иконок HTML

Добавьте заголовок к своему виджету, если хотите, а затем добавьте HTML в свой виджет, следуя приведенной ниже структуре:

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

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

↑ Содержание ↑

Примеры и образцы изображений

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

Чтобы сначала использовать эти значки в своем виджете, создайте пустой текстовый виджет, выбрав Дизайн → Настройка → Виджеты.

Затем скопируйте блок кода со страницы «Виджеты социальных сетей» для предпочтительного стиля значка:

↑ Содержание ↑

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

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

Пример: https://www.pinterest.fr/yourpinterest/ следует заменить на https: //www.pinterest. com / yourpinterest /

Добавление значков социальных сетей на ваш сайт Weebly

Общий

Добавление значков социальных сетей на ваш сайт Weebly

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

  1. Войдите на свой сайт Weebly
  2. На левой боковой панели прокрутите до категории Еще внизу
  3. Найдите Социальные иконки Коробка
  4. Перетащите поле Социальные значки в то место, где вы хотите разместить значки социальных сетей при предварительном просмотре в реальном времени.

Области, которые являются подходящим местом для социальных иконок, будут выделены

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

Связывание значков с вашими социальными сетями

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

  1. В режиме предварительного просмотра щелкните поле значков социальных сетей
  2. Появится всплывающее окно. Внутри нажмите Управление значками
  3. Здесь вы увидите список отображаемых значков мультимедиа.Щелкните тот, который хотите связать
  4. Вы сможете ввести URL своего профиля
  5. По завершении щелкните стрелку назад для доступа к другим значкам. URL будет автоматически сохранен

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

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

  1. В режиме предварительного просмотра щелкните поле значков социальных сетей
  2. Появится всплывающее окно. Внутри нажмите Управление значками
  3. Здесь будут перечислены все доступные значки социальных сетей.Значки, которые в настоящее время отображаются на вашем сайте, относятся к категории Активно . Доступные значки, которые не используются, показаны в категории Неактивный
  4. Нажмите на значок, который вы хотите добавить или удалить
  5. Переключите ползунок рядом с Показать .

    No related posts.

Как часто можно делать клизму грудничку: рекомендации педиатров

Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы

Как успокоить плачущего ребенка: 10 эффективных способов

Что нужно новорожденному на первое время: полный список необходимых вещей

Пеленки для новорожденных: виды, размеры и способы использования

Детская кроватка для новорожденного: как правильно выбрать

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *