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

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

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

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

Пример 1:

Блок 1

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

Блок 2

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

Пример 2:

Блок 1

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

Блок 2

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

Пример 3:

Блок 1

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

Блок 2

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

Пример 4:

Блок 1

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

Блок 2

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

Пример 5:

Блок 1

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

Блок 2

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

Пример 6:

Блок 1

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

Блок 2

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

Пример 7:

Блок 1

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

Блок 2

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

Пример 8:

Блок 1

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

Блок 2

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

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

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

Ваш комментарий отправлен!

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

  • PiVirus:

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

    Ответить
    • PiVirus:

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

      Ответить
  • Александр:

    Круто! Спасибо

    Ответить
  • Антон:

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

    Ответить
    • Alexander:

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

      Ответить
  • Alex:

    Прикольно придумано

    Ответить