Adding Font Awesome Icons to Quick Launch Links

When customizing the Quick Launch Links Navigation, I got stuck with adding Font Awesome Icons. How do I go about it so that it appears like the ones in the picture below?

And the code is as below:

.ms-core-listMenu-verticalBox UL.root > LI > .menu-item {
 /*Style each menu item*/}  .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li.static > a:hover {
 /*Style on hove sub items*/}  .ms-core-listMenu-verticalBox > ul.root > li.selected > a { 
 /*Style selected top level item*/}  .ms-core-listMenu-verticalBox > ul.root > li > a:hover {  
 /*Style top level mouse hover*/}  .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li > a { 
 /*Style sub level mouse hove*/}  .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li > a.selected {  
 /*Style selected sub item*/}  .ms-core-listMenu-verticalBox a.selected {
 /*Style Selected Item*/}  .ms-core-listMenu-verticalBox UL.root UL {
 /*Style Outer Box*/}