boxes for info, warning, error and check

boxes for info, warning, error and check

by Adam Mendoza

HTML

source: http://isabelcastillo.com/error-info-messages-css

<div class="isa_info">
    <i class="fa fa-info-circle"></i>
    Replace this text with your own text.
</div>

<div class="isa_success">
     <i class="fa fa-check"></i>
     Replace this text with your own text.
</div>

<div class="isa_warning">
     <i class="fa fa-warning"></i>
     Replace this text with your own text.
</div>

<div class="isa_error">
   <i class="fa fa-times-circle"></i>
   Replace this text with your own text.
</div>

CSS

@import url('//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');

.isa_info, .isa_success, .isa_warning, .isa_error {
margin: 10px 0px;
padding:12px;
}
.isa_info {
    color: #00529B;
    background-color: #BDE5F8;
}
.isa_success {
    color: #4F8A10;
    background-color: #DFF2BF;
}
.isa_warning {
    color: #9F6000;
    background-color: #FEEFB3;
}
.isa_error {
    color: #D8000C;
    background-color: #FFBABA;
}
.isa_info i, .isa_success i, .isa_warning i, .isa_error i {
    margin:10px 22px;
    font-size:2em;
    vertical-align:middle;
}