css - "element:hover's" の color 属性が機能しません。何が問題なのですか?

Question

クラス「navIcon」の要素があり、色と背景色を指定します。ユーザーがこの要素にカーソルを合わせると、色が試験用に黒色に変化し、背景も変化します。背景色は正常に変更されましたが、色は最初の色と同じままです。ここに私のスタイルがあります:

.navIcon{
    width: 45px;
    height: 100%;
    text-align: center;
    font-size: 1.3em;
    font-weight: normal;
    float: left;
    padding-top: 8px;
    color: #f7f8f8;
}

.navIcon:hover{
    background-color: #f7f8f8;
    color: #3a3e3e; 
}

そしてhtmlはここにあります：

    <div id="userAuth" class="navIcon">
        <i class="icon-user"></i>
    </div>

また、私はFont Awesomeを使用しています。

何が間違っている可能性がありますか？