FontAwesome 5 реагирует, иконка видна при наведении

Question

Я читал некоторые ответы здесь, и я все еще не уверен, является ли это шрифтом 5 svg или ответным.Значок виден, но когда я его скрываю и нахожу над ним, значок просто не появляется снова.

import React from 'react';

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import './Controls.css';

const controls=(props)=>(
  <div className="controls">
    <FontAwesomeIcon icon= "play" size="6x" className="iconn"/>
  </div>


);

export default controls;

вот мой css ...

.controls .iconn{
  position:relative;
  color: #fff;
  top:2.2rem;
  left:3.0rem;
  display: none;


}

.controls:hover .iconn{
  left: 3.6rem;
  display:block


}

, если у кого-то естьлюбое решение, пожалуйста, помогите мне