Message boxes: info, success, warning and error.

Create simple css for info, success, warning and error message boxes with using fontawesome icons.

by Aqeel Malik

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!--
Name  : Aqeel Malik (Web Developer)
Email : [email protected]
Mobile: +92 302 6262164
Skills: xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | PHP-MySQL | Photoshop | Firework | Dreamweaver
-->
<p class="wt_info"><i class="fa fa-info-circle"></i>Replace this text with your own text.</p>
      <p class="wt_success"><i class="fa fa-check-circle"></i>Replace this text with your own text.</p>
      <p class="wt_warning"><i class="fa fa-warning"></i>Replace this text with your own text.</p>
      <p class="wt_error"><i class="fa fa-times-circle"></i>Replace this text with your own text.

CSS

/*
Name  : Aqeel Malik (Web Developer)
Email : [email protected]
Mobile: +92 302 6262164
Skills: xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | PHP-MySQL | Photoshop | Firework | Dreamweaver
*/
/* success, info, warning, error messages */
.wt_info, .wt_success, .wt_warning, .wt_error {
  font-size: 14px;
  margin: 10px 0;
  padding:10px 5px;
}
.wt_info {color: #00529B;background: #BDE5F8}
.wt_error {color: #D8000C;background: #FFBABA}
.wt_warning {color: #9F6000;background: #FEEFB3}
.wt_success {color: #4F8A10;background: #DFF2BF}
.wt_info i, .wt_success i, .wt_warning i, .wt_error i
{font-size: 2em;margin:10px;vertical-align:middle}

JavaScript

/*
Name  : Aqeel Malik (Web Developer)
Email : [email protected]
Mobile: +92 302 6262164
Skills: xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | PHP-MySQL | Photoshop | Firework | Dreamweaver
*/