Better way to use pseudo elements Here is a JSFiddle of an accordion menu that i've done. I have used :before to add the icons.

My question is, is there a better way to Add different icon to each li item?

My code is as follows:

HTML Structure:

    &lt;ul id="accordion"&gt;
  &lt;li&gt;&lt;div id="profile"&gt;Profile&lt;/div&gt;&lt;/li&gt;
  &lt;li&gt;&lt;div id="messages"&gt;Messages&lt;/div&gt;
    &lt;ul class="submenu"&gt;
      &lt;li&gt;Inbox&lt;/li&gt;
      &lt;li&gt;Sent&lt;/li&gt;
      &lt;li&gt;Drafts&lt;/li&gt;
    &lt;/ul&gt;  
  &lt;/li&gt;
  &lt;li&gt;&lt;div id="settings"&gt;Settings&lt;/div&gt;&lt;/li&gt;
  &lt;li&gt;&lt;div id="logout"&gt;Logout&lt;/div&gt;&lt;/li&gt;
&lt;/ul&gt;


CSS:

    body {
background-image: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/tiny_grid.png);
}

ul{
  list-style-type:none;
  padding:0;
  margin:0;
}

#accordion{
  margin: 20% auto 80% auto;
  width:200px;
  height:auto;
  background-color:#212830;
  border-radius:5px;
  color: #BECEDB;
  font-family: 'Maven Pro', sans-serif;
  border: 1px solid #191E24;
  box-shadow: 0px 0px 5px 2px #666666;
}

#accordion &gt; li &gt; div{
  background-color:#383C48;
  font-weight:700;
  -moz-box-shadow:inset 0 1px 1px -1px #A1B3C9;
  -webkit-box-shadow:inset 0 1px 1px -1px #A1B3C9;
  box-shadow:inset 0 1px 1px -1px #A1B3C9;
  border-bottom:1px solid #191E24;
}

#accordion &gt; li &gt; div, #accordion &gt; li &gt; ul &gt; li{
  padding:10px 15px;
} 

#accordion li{
  cursor:pointer;
}

#accordion &gt; li:first-child &gt;div{
  border-radius: 5px 5px 0 0;
}

#accordion &gt; li:last-child &gt;div{
  border-radius: 0 0 5px 5px;
}

#profile:before,
#messages:before,
#settings:before,
#logout:before,
.submenu&gt;li:before
{
  font-family:FontAwesome;
}

#profile:before{
  content:"\f007  ";
}
#messages:before{
  content:"\f0e0";
}

#settings:before{
  content:"\f013";
}

#logout:before{
  content:"\f08b";
}

.submenu li:before{
  content:"\f0da"
}

#accordion *:before{
  margin-right:10px;
}

.submenu li{
  margin-left:10px;
}


JS code: (No problem with this)

 $("#accordion &gt; li &gt; div").click(function(){
  if(false == $(this).next().is(':visible')){
        $('#accordion ul').slideUp(400);
    }
  $(this).next().slideToggle(300);
 });

$('#accordion ul:eq(0)').show();


Also I would like to know if there are other areas this can be optimized.
Thank you
First things first: You have a navigation but refuse to use anchor tags. Why? This is potentially harmful. How are you going to navigate if you don't have links? The only possible way would be completely relying on JavaScript. All users with disabled JavaScript have a useless list of words instead.

HTML:


Use a tags instead of the div's in your HTML (Use &lt;a href="#"&gt; to test this)
I'd suggest using classes instead of ID's in this scenario as well. The lower specificity of classes will ease your live later. Overwriting an ID instead could be hard


CSS:


If you use actual links for your navigation, there is no need for cursor: pointer; on list-items.
If you want the icons to be clickable as well, add the pseudo-elements to the links instead of the list-items
Don't reset the general styling for lists on the type selector ul. Doing this makes you unable to use lists as regular lists in text etc. You can reset the styles for the navigation on #accordion
Adding a class accordion-item to your list-items could help you. You don't selecting like this: #profile:before, #messages:before, #settings:before...


You have some things to consider now. There are more things to improve, but I'd like to see a new question for an updated navigation with the given advice.