Creating a note style

You can create a “note” class with a custom icon by setting the background, padding-left, and line-height properties.

Screenshot

Code

CSS

.note {
background: url(pencil.gif) no-repeat left center;
padding-left: 33px; /* min is width of image */
line-height: 33px; /* min is height of image */
}

Usage

<p class="note">This is a note</p>

Example

Click here to see an example.