title: Having an icon turn white on hover
body: <p>I wanted the icon to light up white after it's hovered over, however it doesn't seem to work. I tried </p>
  
  <pre><code>.lock:hover {
     color: white;
  }
  </code></pre>
  
  <p>but it didn't work. Any ideas?</p>
  
  <p>CSS:</p>
  
  <pre><code>.lock {
      background: url('https://cdn3.iconfinder.com/data/icons/simplius-pack/512/pencil_and_paper-16.png') no-repeat center;
      display: inline-block;
      width: 30px;
      height: 30px;
      text-align: center;
      vertical-align: middle;
      margin-top:-5px;
  }
  
  .subMenu-link {
      list-style: none;
      padding-left: 30px;
  }
  
  li.subMenu span{
      font-weight: 600;
      font-size: 14px;
  }
  
  .subMenu:hover {
      background: #191919;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;li class="subMenu"&gt;
      &lt;i class="lock"&gt;&lt;/i&gt; 
      &lt;span&gt;User Account&lt;/span&gt;                                   
  &lt;/li&gt;
  </code></pre>
  
  <p>Here's the output it shows:
  <img src="https://i.stack.imgur.com/FujvJ.png" alt="enter image description here"></p>
  
  <p>I just simply want the icon to turn white upon hovering. Any ideas what it is that I'm doing wrong? </p>