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.

• 200_success: What determines whether a list should be red or gold?
• Grischa: @200_success It is the unicode for a long arrow right. You can see it here.
• Grischa: I have updated my question. I have put the css-source file to the snippet. The css class should determine the color I think. Something like class="long_arrow_right red"
• 200_success: What I mean to ask is, why would you choose red or gold? Does it alternate, or is there some meaning to the color code?
• Grischa: @200_success I would propose another color for a child <ul>, but I want maybe later use other colors, too.

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.

• Grischa: Thank you. I have forgot to unminify my css code. Do you also could answer Question 1 and 2?

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>