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: 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.
CSS list-style with Font-Awesome toolkit
css