Q: Hovering A Button And Changing Class Of Font Awesome Icon Inside I'm actually boiling furious right now because I've done this exact same thing in a different project and it worked. I have a button I made, it's an <a> tag. Inside the <a> tag, I have a <i class="fa"> for an icon. When I hover over the button, I want the color for the <i> icon to change. I'm positive the code is correct, just refuses to work. Here is my code:
HTML:
<div id="workspace">

    <a href="#" class="hlo-btn-round">Search <i class="fa fa-search fa-color" aria-hidden="true"></i></a>

</div>

CSS:
/* Control Icon Color */
.fa-color {
  color: #99999a;
}

/* Control Icon Color on Hover (scripted) */
.fa-hover-color {
  color: #323335;
}


/* Basic Round Button Styling */
.hlo-btn-round, .hlo-btn-round:link, .hlo-btn-round:visited, .hlo-btn-round:active, .hlo-btn-round:focus {
  margin-top: 0px;
  padding: 5px 20px;
  border: 1px solid transparent;
  border-radius: 25px;
  line-height: 1.42857143;
  font-family: "Trebuchet MS";
  text-decoration: none;
  text-decoration-color: black;
  vertical-align: middle;
  background-color: white;
  color: black;
  cursor: pointer;
  display: inline-block;
}

.hlo-btn-round:hover {
  background-color: #CCCCD1;
}

Script:
$('hlo-btn-round').hover(function(){
  $(this).children().switchClass('fa-color', 'fa-hover-color');
}, function(){
  $(this).children().switchClass('fa-hover-color', 'fa-color');
});


A: No need for the script, should be do-able in pure CSS - see below:


/* Control Icon Color */
.fa-color {
  color: #99999a;
}


/* Basic Round Button Styling */
.hlo-btn-round, .hlo-btn-round:link, .hlo-btn-round:visited, .hlo-btn-round:active, .hlo-btn-round:focus {
  margin-top: 0px;
  padding: 5px 20px;
  border: 1px solid transparent;
  border-radius: 25px;
  line-height: 1.42857143;
  font-family: "Trebuchet MS";
  text-decoration: none;
  text-decoration-color: black;
  vertical-align: middle;
  background-color: white;
  color: black;
  cursor: pointer;
  display: inline-block;
}

.hlo-btn-round:hover {
  background-color: #CCCCD1;
}

.hlo-btn-round:hover .fa {
  color: #323335;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div id="workspace">

    <a href="#" class="hlo-btn-round">Search <i class="fa fa-search fa-color" aria-hidden="true"></i></a>

</div>



A: Edit: As @ochi has very well spotted in the comment below your question, your error is a rather common one. You're selecting $('hlo-btn-round') which would select any 
<hlo-btn-round></hlo-btn-round>

... elements when, in fact, you probably should be using $('.hlo-btn-round').
You can easily avoid this type of errors by using better coding tools, such as a proper IDE, which would have immediately highlighted the typo for you.

Initial answer: .switchClass() (which I've never heard of before - and I'm not exactly a rookie) seems to be part of jQueryUI. Perhaps you loaded it in the other project but not in this one. 
jQuery provides the much more popular .toggleClass(), which can also take a function as a second param to check a condition and return true (add class) or false (remove class) for that condition.
However, you really don't need JavaScript for this. A simple:
.parent .child {/* normal state CSS here */}
.parent:hover .child {/* hover state CSS here */}

...will do. Or parent .child:hover{}, depending on your needs (set :hover on the element you want to trigger the effect when hovered).
