title: How to change hover color for iconfont icons?
body: <p>Just beginning learning web development.  I understand how to change the hover color for regular links using <code>.classname a:hover{}</code> but every variation of that I've tried hasn't worked. I think there's some quirk to my icons because I downloaded them as an iconfont from flat-icon.com and their instructions (given here: <a href="http://www.flaticon.com/iconfont-demo/" rel="nofollow">http://www.flaticon.com/iconfont-demo/</a>) make it seem like you need to manipulate the flaticon.css file to change any characteristics like the icon color.  </p>
  
  <p>Anyway, this is the relevant part of my code:</p>
  
  <pre><code>&lt;div class="jumbotron"&gt;
    &lt;div class="container" &gt;
      &lt;h4&gt;Family Owned and Operated Since 1978&lt;/h4&gt;
      &lt;table&gt;
        &lt;tr class="big-flat-icons"&gt;
          &lt;td&gt;&lt;a href="services.html"&gt;&lt;i class="flaticon-pipe9"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;&lt;a href="testimonials.html"&gt;&lt;i class="flaticon-diploma20"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;&lt;a href="about-us.html"&gt;&lt;i class="flaticon-man204"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;&lt;a href="contact-us.html"&gt;&lt;i class="flaticon-old26"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;    
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried putting this in my main.css file but it had no effect:</p>
  
  <pre><code>.jumbotron .container a:hover{
      text-decoration: none;
      color: #FF00FF;
  }
  </code></pre>
  
  <p>I had to manipulate the code inside the flaticon.css file that came with the font to change the icons' size and color when originally putting them on my page so I feel like there must also be something I need to do in here to get the hover color working but I haven't figured it out yet:</p>
  
  <pre><code>@font-face {
      font-family: "Flaticon";
      src: url("flaticon.eot");
      src: url("flaticon.eot#iefix") format("embedded-opentype"),
      url("flaticon.woff") format("woff"),
      url("flaticon.ttf") format("truetype"),
      url("flaticon.svg") format("svg");
      font-weight: normal;
      font-style: normal;
  }
  
  [class^="flaticon-"]:before, [class*=" flaticon-"]:before,
  [class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
      font-family: Flaticon;
          font-size: 100px;
  font-style: normal;
  margin-left: 20px;
  color: white;
  }
  
  
  .flaticon-antique:before {
      content: "\e000";
  }
  .flaticon-construction3:before {
      content: "\e001";
  }
  </code></pre>
  
  <p>Sorry for the long question. Does anyone have any ideas?</p>
  
  <p>If it helps, this is where I have the site I'm working on: <a href="http://reagankm.github.io/" rel="nofollow">http://reagankm.github.io/</a></p>