This post will show you how to create message/notification boxes using CSS without using a image/icon/font icon.
So for creating icons, we will use CSS border-radius property and some unicode text if needed. The four icons in question are and .
Here is the style to create these 4 icons. You will notice that I have used specific fonts where needed.

.symbol {
	font-size: 0.9em;
	font-family: Times New Roman;
	border-radius: 1em;
	padding: .1em .6em .1em .6em;
	font-weight: bolder;
	color: white;
	background-color: #4E5A56;
}

.icon-info { background-color: #3229CF; }
.icon-error { background: #e64943; font-family: Consolas; }
.icon-tick { background: #13c823; }
.icon-excl { background: #ffd54b; color: black; }

.icon-info:before { content: 'i'; }
.icon-error:before { content: 'x'; }
.icon-tick:before { content: '\002713'; }
.icon-excl:before { content: '!'; }

For creating containers i.e. message boxes, we will use the following CSS code -

.notify {
	background-color:#e3f7fc; 
	color:#555; 
    border:.1em solid;
	border-color: #8ed9f6;
    border-radius:10px;
    font-family:Tahoma,Geneva,Arial,sans-serif;
    font-size:1.1em;
    padding:10px 10px 10px 10px;
    margin:10px;
    cursor: default;
}

.notify-yellow { background: #fff8c4; border-color: #f7deae; }
.notify-red { background: #ffecec; border-color: #fad9d7; }
.notify-green { background: #e9ffd9; border-color: #D1FAB6; }

Use the .notify class with <div> tag to create a streched container. Then use the .symbol class to create the icon and add the message text later. Here is the code for the following 4 boxes (in screenshot).

<div class="notify"><span class="symbol icon-info"></span> A kind of a notice box !</div> 
<div class="notify notify-red"><span class="symbol icon-error"></span> Error message</div> 
<div class="notify notify-green"><span class="symbol icon-tick"></span> A positive/success/completion message</div> 
<div class="notify notify-yellow"><span class="symbol icon-excl"></span> A warning message</div>

To have the message box not strech to full width of the page, use span instead of div tag.

See the working example on Raw-Github ! And the gist’s source.
Don’t hesitate to ask if you face problems.