Предупредительные сообщения на CSS

Простой вариант добавления в контент предупредительных сообщений, которые устанавливаются одним блоком <div class="n-name">...</div>.

Пример:

Предупредительное сообщение "SUCCESS".

<div class="n-success">...</div>

Предупредительное сообщение "WARNING".

<div class="n-warning">...</div>

Предупредительное сообщение "DANGER".

<div class="n-danger">...</div>

Предупредительное сообщение "INFO".

<div class="n-info">...</div>

В примере используются иконки шрифта Font Awesome, которые при желании можно заменить на другие

HTML:

CSS:

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

Вариант каменной кладки блоков и изображений без использования JS

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

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

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

  • Один такой как я:

    Спасибо. Искал что то подобное. На ips4 движке сделал кнопки с данными css стилями. Все отлично работает

    Ответить
  • Станислав:

    Здравствуйте! Пересадить свой сайт на другой шаблон решил и столкнулся с тем, что иконки не отображаются: https://disk.yandex.ru/i/9nJDhTy1XkVMTQ
    Примерно, в чём копать, не подскажите?

    Ответить
    • Станислав:

      Тут же нашёл: < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" >

      Ответить
    • Alexander:

      Тут иконки сделаны шрифтом awesome, если они не подключены на сайте, то лучше заменить символы на какие-нибудь эмодзи или СВГ графику.
      Другими словами ради этих сообщений не стоит специально подключать этот шрифт.

      Ответить
      • Станислав:

        Здравствуйте! Спасибо большое за подсказку!

        Ответить