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
Here is the style to create these 4 icons. You will notice that I have used specific fonts where needed.
For creating containers i.e. message boxes, we will use the following CSS code -
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).
To have the message box not strech to full width of the page, use span instead of div tag.