CSS list-style with Font-Awesome toolkit I will design a list with a Font-Awesome design arrows.
My code already works fine, but I will improve it.



ul.long_arrow_right_red,ul.long_arrow_right_gold     {list-style: none;}
ul.long_arrow_right_gold li:before {content:"\f178"; font-family: FontAwesome;display: block;float: left;width: 1.5em;color:gold;}
ul.long_arrow_right_red  li:before {content:"\f178"; font-family: FontAwesome;display: block;float: left;width: 1.5em;color:red;}
&lt;link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" /&gt;
&lt;ul class="long_arrow_right_gold"&gt;
  &lt;li&gt;Title
   &lt;ul class="long_arrow_right_red"&gt;
    &lt;li&gt;Lorem&lt;/li&gt; 
    &lt;li&gt;Epsum&lt;/li&gt; 
   &lt;/ul&gt;    
  &lt;/li&gt;
  &lt;li&gt;Title&lt;/li&gt;
 &lt;/ul&gt;




Questions: 


How to use an extra class which define only the color for the li icon? The text inside shouldn't change the color. 

Existing other css code, which I use for text coloring:

.red{color:red;}
.gold{color:gold;}

I think it would be better not do have duplicate following statements:

font-family: FontAwesome;display: block;float: left;width: 1.5em;


How to combine them with a different content: definition?
If you have other improvement ideas, please tell me them.
Properly formatted CSS can make your styles vastly more readable, helping you find bugs as well as making it easier to work with. 

This:


ul.long_arrow_right_red,ul.long_arrow_right_gold     {list-style: none;}
ul.long_arrow_right_gold li:before {content:"\f178"; font-family: FontAwesome;display: block;float: left;width: 1.5em;color:gold;}
ul.long_arrow_right_red  li:before {content:"\f178"; font-family: FontAwesome;display: block;float: left;width: 1.5em;color:red;}



Should instead be something like this:

ul.long_arrow_right_red,
ul.long_arrow_right_gold {
    list-style: none;
}

ul.long_arrow_right_gold li:before {
    content: "\f178"; 
    font-family: FontAwesome;
    display: block;
    float: left;
    width: 1.5em;
    color: gold;
}

ul.long_arrow_right_red li:before {
    content: "\f178"; 
    font-family: FontAwesome;
    display: block;
    float: left;
    width: 1.5em;
    color: red;
}


If you want to have the code "minified" then do that before you deploy it, source code should aim for readability and maintainability, rather than length / character count.