jQuery Forum

I've been trying to get a different icon in each header of the accordion but I can't seem to figure out how for the life of me. I have tried methods of my own but they don't work and i've also tried to search on Google for some methods which I looked at the method on how this person suggested but it doesn't work for me. This is what my accordion styling looks like right now.

1. .ui-accordion .ui-accordion-header {
2.     display: block;
3.     cursor: pointer;
4.     position: relative;
5.     margin-top: 2px;
6.     margin: auto;
7.     min-height: 0; /* support: IE7 */
8.     background-color: #fff;
9.     width: 900px;
10.     height: 30px;
11.     /* background */
12.     background-repeat: repeat;
13.     background-image: url(../images/accordion_bar.png);
14. }
15. .ui-accordion .ui-accordion-icons {
16.     padding-left: 2.2em; /*2.2em*/
17. }
18. .ui-accordion .ui-accordion-content {
19.     overflow: auto;
20.     border: 2px solid #000;
21.     width: 949px;
22.     margin: auto;
23.     border-top: 1px;
24. }
25. .ui-accordion .acc_header {
26.     font-size: 24px;
27.     font-weight: bold;
28.     font-family: "CordiaUPC";
29. }
30. .ui-accordion-header.s1 .ui-icon {
31.     background: url(../images/icon/gmod_icon.png);
32. }
33. .ui-accordion-header.s2 .ui-icon {
34.     background: url(../images/icon/minecraft_icon.png);
35. }

Also here's a picture of what i'm trying to get it to look like.