Unable to change font awesome icon color when checked - Check box

the first one works but I am unable to change the color of the second (.fa ). I am able to change the font color while not active.

#pgggo-sort-filter ul li label input[type="checkbox"]:checked ~ .icon-box{
  background: green;
  /* padding: 10px; */
}

#pgggo-sort-filter ul li label input[type="checkbox"]:checked ~ .fa{
  color: yellow;
}

my html

 <div id="pgggo-sort-filter" class="pgggo-sort-filter">
              <ul>
                <li>
                   <label>
                     <input type="checkbox" name="">
                     <div class="icon-box">
                       <i class="fa fa-arrow-circle-o-down" area-hidden="true"></i>
                     </div>
                   </label>
                   <label>
                     <input type="checkbox" name="">
                     <div class="icon-box">
                       <i class="fa fa-arrow-circle-o-up" area-hidden="true"></i>
                     </div>
                   </label>
                </li>
              </ul>
              <a class="button primary" href="#">Sort
              </a>
            </div>