Inter-Net.PRO

Кнопки соцсетей для сайта на чистом CSS

  • 264 60
09 окт 2018 15:03 #21 от Inter-Net PRO

Сергей пишет: Сейчас иконки справа, нужно что бы были по середине подвала.

Смотрите, во первых я вам предлагаю действительно перенести кнопки во внутрь футера (сейчас они у вас под футером). Просто перенесите их во внутрь
<footer></footer>
Так с точки зрения сематики будет правильно.

Сами кнопки соцсетей нужно обернуть отдельным дивом, чтобы было как отдельный блок. Вот так:
<div class="social__button">
    <div class="social youtube">
        <a href="https://www.youtube.com/channel/UCBwTf30zkiTV1-Iu8al0Efw" target="_blank"><i class="fa fa-youtube fa-2x"></i></a>
    </div>
    <div class="social instagram">
        <a href="https://www.instagram.com/vagnn.ru" target="_blank"><i class="fa fa-instagram fa-2x"></i></a>
    </div>
    <div class="social vk">
        <a href="https://vk.com/nemetskydom" target="_blank"><i class="fa fa-vk fa-2x"></i></a>    
    </div>
</div>

Потом добавьте в css:
.social__button {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

В файле style.css 410 строчка класс .social a замените так:
.social a {
    display: flow-root;
    width: 46px;
    height: 46px;
    margin: 0 10px 10px 0;
    padding: 6px;
    text-align: center;
    background: #fff;
    color: #000;
    border: 1px solid #ccc;
    border-radius: 46px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
}

09 окт 2018 16:07 #22 от Сергей
Inter-Net PRO , Вы просто гений! Спасибо Вам большое и процветания!!! ))

  • 264 60
09 окт 2018 16:09 - 09 окт 2018 16:11 #23 от Inter-Net PRO

Сергей пишет: Буду очень благодарен за помощь!

Не пойму почему у вас весь контент прописан внутри блока header. Логично в хедере (шапка сайта) оставить логотип и контакты, а остальное вынести в main (семантический тег HTML для основного контента)
<main>
    <!-- Основной контент -->
</main>


И ещё посмотрите сюда на валидатор HTML:  validator.w3.org/nu/?doc=http://vagnn.ru/
Это инструмент для проверки html-кода от самой главной конторы по интернету.
Надеюсь вы сможете понять его подсказки по ошибкам в коде. Например пункт 4 - Ошибка. Подсказывает, что в теге h1 есть открытые теги но нет закрывающих. И действительно, смотрим, а там два открывающих тега span. По задумке второй span должен быть закрывающим. Просто делаем этот тег закрывающим (добавляем в него слеш / ):
</span>
По такой схеме исправляем все ошибки. Они там не сложные.


Так же я в коде вижу, что у вас два раза подключён иконочный шрифт FontAwesome. Один раз в хэде (версия 4.6.3) и второй раз с CDN (версия 4.7.0).

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

19 окт 2018 12:46 #24 от Марина
Здравствуйте!

Подскажите, пожалуйста, как на кнопке указать свой значок? Например, blokspot.

  • 264 60
19 окт 2018 23:57 - 20 окт 2018 19:19 #25 от Inter-Net PRO

Марина пишет: Подскажите, пожалуйста, как на кнопке указать свой значок? Например, blokspot.

Я извиняюсь, а что такое blokspot? Я по этому запросу нашёл пустую белую страницу. Может опечатка?

В моём примере были использованы шрифтовые иконки FontAwesome 4.7.0 вот тут вся их коллекция  inter-net.pro/font-awesome#brends

Ещё больше иконок для брендов в FontAwesome 5.

А если вам иконки на сайте нужны только для кнопок соцсетей, то лучше вообще вставить svg или svg-спрайт сделать. Так лучше - меньше вес страниц сайта, быстрее загрузка сайта, меньше запросов к серверу.
Спасибо сказали: Марина

20 окт 2018 18:30 #26 от Марина
Действительно опечатка. Правильное название - blogspot. Спасибо за Ваш ответ и ссылку на значки!

  • 264 60
20 окт 2018 19:40 #27 от Inter-Net PRO

Марина пишет: Действительно опечатка. Правильное название - blogspot.

В Fontawesome 4.7.0 нет иконки для Blogger, она в 5 версии появилась  fontawesome.com/icons/blogger-b?style=brands
Просто статью написано когда ещё последней версией было 4.7.0

Но если только подключаете Fontawesome, то можно включить 5, только названия классов нужно поменять. У меня в футере иконки в кнопках из 5.
Спасибо сказали: Марина

21 окт 2018 14:03 #28 от Марина
Подскажите, пожалуйста, что я делаю не так. Вот это @import url не пропускается Вордпресс, он пишет, что это недопустимо. Попыталась подключить через "линк", но тоже ничего не вышло. Решила использовать спецсимволы типа '\2709'; и опять ничего не отображается на кнопках. У Вас в статье вроде простой код. Но почему спецсимволы не показываются и подключить вот это  maxcdn.bootstrapcdn.com/font-awesome/4.7...font-awesome.min.css не удается?

  • 264 60
21 окт 2018 21:03 #29 от Inter-Net PRO

Марина пишет: Решила использовать спецсимволы типа '\2709';

Не, это не то. Это уже из подключённого иконочного шрифта вытягивает иконки.

Марина пишет: Вот это @import url не пропускается Вордпресс, он пишет, что это недопустимо. Попыталась подключить через "линк", но тоже ничего не вышло. И подключить вот это  maxcdn.bootstrapcdn.com/font-awesome/4.7...font-awesome.min.css не удается?

Я вот только что специально в вордпрессе протестировал по самому простому способу.
В админке - Внешний вид - Настроить - Дополнительные стили.
Туда вставляем:
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
.social a{
    text-align:center;
    width:46px;
    height:46px;
    float:left;
    background:#fff;
    border:1px solid #ccc;
    box-shadow:0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
    border-radius:46px;
    margin:0 10px 10px 0;
    padding:6px;
    color:#000;
}
.github a:hover{background:#191919;color:#fff;}
.youtube a:hover{background:#c4302b;color:#fff;}
.google-pluse a:hover{background:#DD4B39;color:#fff;}
.twitter a:hover{background:#00acee;color:#fff;}
.instagram a:hover{background:#3f729b;color:#fff;}
.facebook a:hover{background:#3b5998;color:#fff;}
.skype a:hover{background:#00aff0;color:#fff;}
.vk a:hover{background:#5d84ae;color:#fff;}
.odnoklassniki a:hover{background:#f93;color:#fff;}
.pinterest a:hover{background:#c8232c;color:#fff;}
.linkedin a:hover{background:#0e76a8;color:#fff;}
.telegram a:hover{background:#249bd7;color:#fff;}
.tumblr a:hover{background:#34526f;color:#fff;}
.windows a:hover{background:#125acd;color:#fff;}
.whatsapp a:hover{background:#50b154;color:#fff;}
.weibo a:hover{background:#d52b2b;color:#fff;}
.dropbox a:hover{background:#1087dd;color:#fff;}
Жмём Сохранить, потом Опубликовать.

Затем Внешний вид - Виджеты - добавляем виджет HTML-код, куда прописываем нужные кнопки из этого кода:
<div class="social github">
    <a href="#" target="_blank"><i class="fa fa-github fa-2x"></i></a>
</div>
<div class="social youtube">
    <a href="#" target="_blank"><i class="fa fa-youtube fa-2x"></i></a>
</div>
<div class="social google-pluse">
    <a href="#" target="_blank"><i class="fa fa-google-plus fa-2x"></i></a>
</div>
<div class="social twitter">
    <a href="#" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
</div>
<div class="social instagram">
    <a href="#" target="_blank"><i class="fa fa-instagram fa-2x"></i></a>
</div>
<div class="social facebook">
    <a href="#" target="_blank"><i class="fa fa-facebook fa-2x"></i></a>    
</div>
<div class="social skype">
    <a href="#" target="_blank"><i class="fa fa-skype fa-2x"></i></a>
</div>
<div class="social vk">
    <a href="#" target="_blank"><i class="fa fa-vk fa-2x"></i></a>    
</div>
<div class="social odnoklassniki">
    <a href="#" target="_blank"><i class="fa fa-odnoklassniki fa-2x"></i></a>   
</div>
<div class="social pinterest">
    <a href="#" target="_blank"><i class="fa fa-pinterest fa-2x"></i></a>
</div> 
<div class="social linkedin">
    <a href="#" target="_blank"><i class="fa fa-linkedin fa-2x"></i></a>
</div>
<div class="social telegram">
    <a href="#" target="_blank"><i class="fa fa-paper-plane fa-2x"></i></a>
</div>
<div class="social tumblr">
    <a href="#" target="_blank"><i class="fa fa-tumblr fa-2x"></i></a>
</div>
<div class="social windows">
    <a href="#" target="_blank"><i class="fa fa-windows fa-2x"></i></a>
</div>
<div class="social whatsapp">
    <a href="#" target="_blank"><i class="fa fa-whatsapp fa-2x"></i></a>
</div>
<div class="social weibo">
    <a href="#" target="_blank"><i class="fa fa-weibo fa-2x"></i></a>
</div>
<div class="social dropbox">
    <a href="#" target="_blank"><i class="fa fa-dropbox fa-2x"></i></a>
</div>
и сохраняем.
Кнопки появятся на сайте. Если будут какие кривости - цвет не тот, тени, отступы неправильные - можно подправить CSS. Если с этим не дружите, можете ссылку оставить, я подскажу как поправить.
Спасибо сказали: Марина

22 окт 2018 10:32 #30 от Марина
Большое спасибо Вам за подсказку. Не подозревала, что в админке можно выбрать - Внешний вид - Настроить - Дополнительные стили. Получилось подключить иконки.

Авторизация

Войти через соцсети: