Tutorial: Error, Success, Warning, and Info Messages with CSS & Other Characters Cheatsheet
This is the most useful and important part of making your own dynamic web site: custom messages that display info, success, warning, or errors. I usually have this set up in my HTML views, and dynamically generated by my PHP code.
This is info text
This is success text
This is warning text
This is error text
This is the CSS code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
.info, .success, .warning, .error { margin: 10px 0px; padding:12px; font-family: FontAwesome; } .success:before { content:'\f00c'; padding-right: 5px; } .info:before { content:"\f05a"; padding-right: 5px; } .warning:before { content:'\f071'; padding-right: 5px; } .error:before { content:'\f057'; padding-right: 5px; } .success { color: #4F8A10; background-color: #DFF2BF; } .info { color: #00529B; background-color: #BDE5F8; } .warning { color: #9F6000; background-color: #FEEFB3; } .error { color: #D8000C; background-color: #FFBABA; } |
And this is the HTML code wrapped in div tags for the four message boxes:
|
1 2 3 4 |
<div class="info">This is info text</div> <div class="success">This is success text</div> <div class="warning">This is warning text</div> <div class="error">This is error text</div> |
Click on the link here to view the PDF of Font Awesome cheatsheet of all the content values for each icon.
