在悬停时更改带有文本的FontAwesome图标

我正在尝试为我的网站创建一个响应式功能.基本上我想要的是使用字体很棒的导航图标,但是当你在计算机上将鼠标悬停在图标上时,它会变成一个单词.

我已经通过CSS尝试了它a:content:"",然后使用a:hover:content:""

我之前从未尝试过类似的东西,如果有人能指出我必须做些什么才能让它发挥作用,我会很感激.

这是一个JSFiddle

i {
  color: #fff;
}

i {
  padding: 0 10px;
}

ul {
  list-style-type: none;
}

.nav ul {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0px;
}

.nav ul li {
  font-size: 12pt;
  display: inline-block;
  padding: 15px;
  transition: all 0.2s ease-in-out;
}

.nav ul li a {
  font-family: FontAwesome;
  color: #eee;
  font-size: 22pt;
  text-decoration: none;
}

.nav ul li:nth-child(1) {
  background: #a3d39c;
}

.nav ul li:nth-child(2) {
  background: #7accc8;
}

.nav ul li:nth-child(3) {
  background: #4aaaa5;
}

.nav ul li:nth-child(4) {
  background: #35404f;
}

.nav ul li a:before:nth-child(1) {
  content: "\f015";
}

.nav ul li a:before:nth-child(2) {
  content: "\f0f4";
}

.nav ul li a:before:nth-child(3) {
  content: "\f121";
}

.nav ul li a:before:nth-child(4) {
  content: "\f075";
}

.nav ul li a:hover:nth-child(1) {
  content: "Home";
}

.nav ul li a:hover:nth-child(2) {
  content: "About";
}

.nav ul li a:hover:nth-child(3) {
  content: "Projects";
}

.nav ul li a:hover:nth-child(4) {
  content: "Contact";
}

.nav a:hover {
  color: #fff;
}

  

    
Home
    
About
    
Projects
    
Contact
  

    Home

.nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    right: 0;
}
.nav li {
    font-size:12pt;
    display:block;
    float: left;
    height:90px;
    width: 145px; /*new*/
    text-align: center; /*new*/
    transition: all 0.2s ease-in-out;
}
.nav .home {
    background: #a3d39c;
}
.nav .about {
    background: #7accc8;
}
.nav .projects {
    background: #4aaaa5;
}
.nav .contact {
    background: #35404f;
}
.nav li a {
    font-family: FontAwesome;
    color:#eee;
    font-size:22pt;
    text-decoration: none;
    display: block;
    padding:15px;
}
.nav li i {
    color:#fff;
    padding:0 10px;
}
.nav li b {
    padding: 15px 0;
    display: none;
}
.nav a:hover {
    color: #fff;
}
.nav a:hover i {
    display: none;
}
.nav a:hover b {
    display: block;
}

    

        

        	Home
        
        

        	About
        
        

        	Projects
        
        

        	Contact