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:

CSS for error, warning, success & info boxes

CSS

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:10px0px;

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:

HTML Code

1

2

3

4

<div class="info">Thisisinfo text</div>

<div class="success">Thisissuccess text</div>

<div class="warning">Thisiswarning text</div>

<div class="error">Thisiserror text</div>

Click on the link here to view the PDF of Font Awesome cheatsheet of all the content values for each icon.