Блок с иконками html

Как сверстать и оформить в css кнопки социальных сетей

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

Разметка и базовые стили

Итак, поскольку мы создаем блок с иконками социальных сетей, то наш блок назовем share (поделиться), так как для этого в основном эти иконки и ставят (хотя иногда это просто ссылки на группы). Далее нужно указать содержимое этого контейнера.
Добавим в html-файл такой код:

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

Допустим, у нас будет 3 социальных сети – Вконтакте, Фейсбук, Твиттер. Перед ними выводим слово, а далее размещаем 3 ссылки. Все они будут иметь одинаковый класс – social , но также каждая гиперссылка получит свой, уникальный класс.

Добавим пока что вот такие стили:

.share <
width: 280px;
margin: 0 auto;
padding: 10px;
background: #D3CDEE;
>
.share i <
margin-right: 15px;
color: black;
text-transform: uppercase;
>

Мы немного оформили сам контейнер для ссылок (размеры, отступы, фон) и надпись.

Оформляем иконки

Теперь самое время поработать с ссылками, а точнее, с их общим классом – social . Очевидно, что иконки должны располагаться в ряд, иметь одинаковые размеры ширины и высоты, отступы и какой-нибудь фон. Вот это все мы и пропишем:

.social <
display: inline-block;
width: 40px;
height: 40px;
background: #bdc3c7;
vertical-align: middle;
margin-right: 10px;
>

Свойством display: inline-block мы сделали так, что наши ссылки преобразовались в блочные элементы, но в то же время сохранили способность стоять в ряд. Далее указываем размеры и отступ справа, чтобы блоки не прилегали слитно друг к другу.

Хорошо, а для чего нам vertical-align: middle ? Это свойство выровняет текст в контейнере так, что он будет ровно по центру по вертикали. Также зададим нашим ячейкам какой-нибудь фон, чтобы визуально видеть их уже на этом этапе. Получилась заготовка. Самое время наконец добавить иконочки.

Финальный этап

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

Короче, нам нужно такое изображение. У меня оно примерно 120 на 40.

В css-стили добавляем следующие правила:

.social-vk <
background: url(icon.png);
>
.social-fb <
background: url(icon.png) -40px 0;
>
.social-tw <
background: url(icon.png) -78px 0;
>

Получаем на выходе полностью оформленный блок с иконками.

Вы поняли, как мы это получили? Если нет, то объясняю. Каждая ссылка блок имеет размер 40 на 40. Соответственно, когда мы задаем для него фоновое изображение 120 на 40, то блок просто не может вместить его полностью, и в результате вмещает столько, сколько может.

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

Записав в фоне так: background: url(icon.png) -40px 0 , мы явно указываем, что для блока social-fb , фоновая картинка должна отобразиться именно с указанного положения – сорока пикселей по ширине влево и по высоте без смещения, потому что оно не нужно. Вот так вот все просто, на самом деле.

Что еще можно сделать?

Может быть, вы еще как-то дополнительно хотите оформить блок социальных сетей. Есть несколько идей. Во-первых, можно добавить всем иконкам скругление углов.

Во-вторых, можно добавить им рамку.

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

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

Итог

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

На этом я сегодняшнюю статья-урок заканчиваю. В следующий раз создадим на css еще что-нибудь

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший — HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей — 4.8 из 5. Пусть вашим сайтам будет хорошо.

Еще материалы по HTML

Источник

Как сделать — Панель иконок

.icon-bar a display: block; /* Сделайте так, чтобы ссылки располагались друг под другом, а не бок о бок */
text-align: center; /* Выравнивание текста по центру */
padding: 16px; /* Добавить немного отступы */
transition: all 0.3s ease; /* Добавить переход для эффектов наведения */
color: white; /* Белый цвет текста */
font-size: 36px; /* Увеличенный размер шрифта */
>

.icon-bar a:hover background-color: #000; /* Добавить при наведении цвет */
>

.active background-color: #4CAF50; /* Добавить активный/текущий цвет */
>

Пример вертикальные

.icon-bar <
width: 100%; /* Полная ширина */
background-color: #555; /* Темно-серый фон */
overflow: auto; /* Переполнение из-за поплавка */
>

.icon-bar a float: left; /* Поплавок одной стороны бок */
text-align: center; /* Выравнивание текста по центру */
width: 20%; /* Равная ширина (5 иконок с шириной 20% каждая = 100%) */
padding: 12px 0; /* Некоторые верхние и нижние отступы */
transition: all 0.3s ease; /* Добавить переход для эффектов наведения */
color: white; /* Белый цвет текста */
font-size: 36px; /* Увеличенный размер шрифта */
>

.icon-bar a:hover background-color: #000; /* Добавить при наведении цвет */
>

.active background-color: #4CAF50; /* Добавить активный/текущий цвет */
>

Связанные страницы

Совет: Зайдите на наш учебник CSS Навигации, чтобы узнать больше о навигационных панелях.

Совет: Зайдите на наш учебник Иконки, чтобы узнать больше о значках.

Источник

Оформление блоков с иконками

В данной статье представлено несколько вариантов оформления блоков с иконками.

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

В каждом из примеров сделано 2 варианта вывода иконки: шрифтом и графикой.

Пример 1:

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Пример 2:

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Пример 3:

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Пример 4:

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Пример 5:

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Пример 6:

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Пример 7:

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Пример 8:

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

Блок 1

Иконка отображается шрифтом «Font Awesome»

Блок 2

Иконка отображается графическим файлом

• Опубликовано: 08.06.2017 / Обновлено: 22.04.2018
• Рубрики: Вкладки, блоки и списки
• Метки: CSS, Авторское, Иконки, Сборники
• 33566 просмотров

Смотрите также:

Оформление списков ul li для информационных блоков

Красивое оформление списков для любой информации, с использованием всего одного класса.

Капли воды на CSS

Капли воды для оформления фона блока или секции

Сетка из шестиугольников на CSS

Адаптивная сетка из шестиугольников для фотогалереи или кратких информационных блоков

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

Комментарии:

Подскажите пожалуйста! Как обернуть каждый блок ссылкой? Чтобы он весь стал кликабельным. Для каждого отдельная ссылка нужда.

Пример 5: что то косяки у меня, то ли в хроме дело толи лыжи не едут, в общем при ховере на елемент, svg не много потрясывает как то не понятно, лево право и саму иконку внутри потрясывает вних верх. Как будто все постепенно происходит. Врубиться не могу

Присмотрелся, этот глюк не у всех. Организовал 2 ряда по 5 блоков из примера 5, из них svg трясуться только первые 2 блока в каждом ряду

Здравствуйте. Подскажите, как сделать, чтобы один блок был на 4 иконки по горизонтали, или 8 иконок 4 сверху и 4 снизу например. Понравился пример 1 и 2. И эта вёрстка адаптивная под мобильную версию?
Заранее спасибо.

Тут сам блок имеет 100% ширину.
Чтобы их раскладывать по 4 в ряд, нужно использовать сетку и размещать их там.
Мне удобнее всего всего bootstrap сетка.
Если у вас сайт имеет мобильную версию, то сетка там уже скорее всего какая-то есть. Нужно лишь вложить в нее эти блоки.
Или можно самому сделать сетку или просто задать блокам точную ширину, например 400px и разместить их в ряд

Источник

Размещение иконок на странице сайта. Делать проще, поддерживать легче

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

.bl_button__wrapp < width: 100%; margin: 5% auto; font-size: 30px; line-height: 34px; color: blue >.bl_button < position: relative; width: 150px; padding: 10px; margin: 0 auto; text-align: center; border: 1px solid #00f; cursor:pointer; >.fa-bars < position: absolute; left: 10px; font-size: 34px; >.bl_button__text

Это стандартная форма описания кнопки. Я сам долгое время примерно так писал свой код. Данное написание особо практикуется теми, кто использует готовые иконочные шрифты на подобии FontAwesome
Небольшие трудности возникают если текст должен быть по центру, а иконка несколько смещена относительно текста. Но всё это прекрасно решаемо через свойство position:absolute; задаваемое иконке. Также бывают проблемы с позиционированием данной иконки при адаптивности кнопки, но это другая история.

Теперь я хотел бы описать свой метод оформления иконок в тексте страници (на примере всё того же FontAwesome).

 menu  Съешь ещё этих мягких французских булок.  

.button_menu < min-width: 280px; margin-top: 5%; margin-left: 4%; font-size: 4em; color: blue; border: 1px solid #00f; outline:none; /* Убираем если вас это смущает по дизайну*/ background:none; /* Убираем если вас это смущает по дизайну*/ >.button_menu__text < position:relative; width: 100%; display: inline-block; text-align: center; margin: 0 auto; padding: 10px 40px; >.button_icon__menu:before

Преимущества такого описания.

1) Кода стало меньше. (Это существенно облегчит вам жизнь на масштабных проектах).

2) Код стал семантически более верным. Если div(или любой другой тег) функционально у Вас выполняет назначение кнопки, то и делайте его через тег button *Иначе возможны проблемы, особенно с Apple устройствами для которых придется прописывать type=«button» для вашего не правильного тега.

3) span размещенный внутри button всегда выравнивается по центру. (*Можно сменить ему display: если вам важны внутренне отступы).

4) Как вы могли заметить, вся суть моего оформления в том что я выношу изображение иконки через псевдо класс :before (:after) и позиционирую его абсолютно. При этом у его родителя span установлен position:relative; (! Важно, чтобы для иконки присваивался отдельный класс).

5) Иконка будет всегда на своем месте относительно span, даже если у вас предусмотрена смена языка, и скажем, в другом языке данное слово могло бы визуально перекрыть иконку.

6) Иконки, оформленные таким образом легко менять, особенно если вы используете препроцессоры (SASS, SCSS, LESS. ), просто добавь нужный класс к нужному элементу.

Недостатки такого описания: (а куда же без них).

1) При использовании тега button довольно часто приходится сбрасывать или переопределять стили, иначе выглядит не очень.

outline:none; background:none; border:none; 

2) Для каждого родительского (span) допустимо одновременно отображать только две иконки, собственно на псевдокласс :before и :after.

3) Если вы, как и я, довольно часто в своих работах используете FontAwesome, вам чаще придется посещать их официальный сайт, что бы выучить Unicode каждой иконки

Это несколько сложнее чем просто прописать классы fa fa-bars. Здесь есть и полный список иконок

4) Поскольку я в написании своего CSS стараюсь придерживаться методологии, то у меня для родительского элемента может быть и довольно много классов

Источник