CSS list-style with Font-Awesome toolkit

Question

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;}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<ul class="long_arrow_right_gold">
		<li>Title
			<ul class="long_arrow_right_red">
				<li>Lorem</li> 
				<li>Epsum</li> 
			</ul>				
		</li>
		<li>Title</li>
	</ul>

Questions:

1. 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;}
   

2. 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?

3. If you have other improvement ideas, please tell me them.

Answer 1

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.

Answer 2

I have a solution for my question one and two: using one class to make the arrows, and a second class for choosing the color.

ul.long_arrow_right     {list-style: none;}
ul.long_arrow_right  li:before {content:"\f178"; font-family: FontAwesome;display: block;float: left;width: 1.5em;color:green;}

ul.gold li:before 	{color:gold;}
ul.red li:before 	{color:red;}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<ul class="long_arrow_right gold">
		<li>Title
			<ul class="long_arrow_right red">
				<li>Lorem</li> 
				<li>Epsum</li> 
			</ul>				
		</li>
		<li>Title</li>
	</ul>