How do you change the color of the vector's icon when you're at it?

[Anderson]

How do you change the colour of the icon when you put it on a block containing them?

ul {
  padding-left: 20px;
  list-style: none;
}
li {
  margin-bottom: 10px;
}
p1,
p2,
p3,
p4,
p5,
p6 {
  background-color: #000;
  color: #fff;
}
p1:hover p1:before,
p2:hover p2:before,
p3:hover p3:before,
p4:hover p4:before,
p5:hover p5:before,
p6:hover p6:before {
  color: red;
}
p1:before {
  font-family: 'FontAwesome';
  content: "\f0c9";
  padding: 0 5px 0 15px;
}
p2:before {
  font-family: 'FontAwesome';
  content: "\f0ac";
  padding: 0 5px 0 15px;
}
p3:before {
  font-family: 'FontAwesome';
  content: "\f082";
  padding: 0 5px 0 15px;
}
p4:before {
  font-family: 'FontAwesome';
  content: "\f09c";
  padding: 0 5px 0 15px;
}
p5:before {
  font-family: 'FontAwesome';
  content: "\f095";
  padding: 0 5px 0 15px;
}
p6:before {
  font-family: 'FontAwesome';
  content: "\f022";
  padding: 0 5px 0 15px;
}
p7:before {
  font-family: 'FontAwesome';
  content: "\f054";
  padding: 0 5px 0 15px;
}
p8:before {
  font-family: 'FontAwesome';
  content: "\f003";
  padding: 0 5px 0 15px;
}
p9:before {
  font-family: 'FontAwesome';
  content: "\f081";
  padding: 0 5px 0 15px;
}
p10:before {
  font-family: 'FontAwesome';
  content: "\f002";
  padding: 0 5px 0 15px;
}
p11:before {
  font-family: 'FontAwesome';
  content: "\f073";
  padding: 0 5px 0 15px;
}
p12:before {
  font-family: 'FontAwesome';
  content: "\f0e8";
  padding: 0 5px 0 15px;
}
/* V 4.4 */
p13:before {

font-family: 'FontAwesome';

content: "\f255";

padding: 0 5px 0 15px;

}

p14:before {

font-family: 'FontAwesome';

content: "\f256";

padding: 0 5px 0 15px;

}

p15:before {

font-family: 'FontAwesome';

content: "\f257";

padding: 0 5px 0 15px;

}

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<p1>1</p1>

<br>

<p2>2</p2>

<br>

<p3>3</p3>

<br>

<p4>4</p4>

<br>

<p5>5</p5>

<br>

<p6>6</p6>

<br>

http://jsfiddle.net/JfGVE/869/

[Laycee]

Just change the color of the element that's been put on, not the investment.
On tape

p1:hover p1:before,

This element will be selected

<p1>
    <p1>::before</p1>
</p1>

Because if a gap is used in the sector, an internal element is starting to be found.

ul {
  padding-left: 20px;
  list-style: none;
}
li {
  margin-bottom: 10px;
}
p1,
p2,
p3,
p4,
p5,
p6 {
  background-color: #000;
  color: #fff;
}
p1:hover:before,
p2:hover:before,
p3:hover:before,
p4:hover:before,
p5:hover:before,
p6:hover:before {
  color: red;
}
p1:before {
  font-family: 'FontAwesome';
  content: "\f0c9";
  padding: 0 5px 0 15px;
}
p2:before {
  font-family: 'FontAwesome';
  content: "\f0ac";
  padding: 0 5px 0 15px;
}
p3:before {
  font-family: 'FontAwesome';
  content: "\f082";
  padding: 0 5px 0 15px;
}
p4:before {
  font-family: 'FontAwesome';
  content: "\f09c";
  padding: 0 5px 0 15px;
}
p5:before {
  font-family: 'FontAwesome';
  content: "\f095";
  padding: 0 5px 0 15px;
}
p6:before {
  font-family: 'FontAwesome';
  content: "\f022";
  padding: 0 5px 0 15px;
}
p7:before {
  font-family: 'FontAwesome';
  content: "\f054";
  padding: 0 5px 0 15px;
}
p8:before {
  font-family: 'FontAwesome';
  content: "\f003";
  padding: 0 5px 0 15px;
}
p9:before {
  font-family: 'FontAwesome';
  content: "\f081";
  padding: 0 5px 0 15px;
}
p10:before {
  font-family: 'FontAwesome';
  content: "\f002";
  padding: 0 5px 0 15px;
}
p11:before {
  font-family: 'FontAwesome';
  content: "\f073";
  padding: 0 5px 0 15px;
}
p12:before {
  font-family: 'FontAwesome';
  content: "\f0e8";
  padding: 0 5px 0 15px;
}
/* V 4.4 */
p13:before {

font-family: 'FontAwesome';

content: "\f255";

padding: 0 5px 0 15px;

}

p14:before {

font-family: 'FontAwesome';

content: "\f256";

padding: 0 5px 0 15px;

}

p15:before {

font-family: 'FontAwesome';

content: "\f257";

padding: 0 5px 0 15px;

}

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<p1>1</p1>

<br>

<p2>2</p2>

<br>

<p3>3</p3>

<br>

<p4>4</p4>

<br>

<p5>5</p5>

<br>

<p6>6</p6>

<br>