use css to replace icon with text when hover

1<div class="nav">
2    <ul>
3        <li class="home">
4        	<a href="index.html"><i class="icon fa fa-home fa-2x"></i><b>Home</b></a>
5        </li>
6        <li class="about">
7        	<a href="about"><i class="icon fa fa-coffee fa-2x"></i><b>About</b></a>
8        </li>
9        <li class="projects">
10        	<a href="#projects"><i class="icon fa fa-code fa-2x"></i><b>Projects</b></a>
11        </li>
12        <li class="contact">
13        	<a href="#contact"><i class="icon fa fa-comment fa-2x"></i><b>Contact</b></a>
14        </li>
15    </ul>
16</div>

1<li class="home">
2    <a href="index.html"><i class="icon fa fa-home fa-2x"></i><b>Home</b></a>
3</li>

1@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
2
3.nav ul {
4    list-style: none;
5    margin: 0;
6    padding: 0;
7    position: absolute;
8    top: 0;
9    right: 0;
10}
11.nav li {
12    font-size:12pt;
13    display:block;
14    float: left;
15    height:90px;
16    width: 145px; /*new*/
17    text-align: center; /*new*/
18    transition: all 0.2s ease-in-out;
19}
20.nav .home {
21    background: #a3d39c;
22}
23.nav .about {
24    background: #7accc8;
25}
26.nav .projects {
27    background: #4aaaa5;
28}
29.nav .contact {
30    background: #35404f;
31}
32.nav li a {
33    font-family: FontAwesome;
34    color:#eee;
35    font-size:22pt;
36    text-decoration: none;
37    display: block;
38    padding:15px;
39}
40.nav li i {
41    color:#fff;
42    padding:0 10px;
43}
44.nav li b {
45    padding: 15px 0;
46    display: none;
47}
48.nav a:hover {
49    color: #fff;
50}
51.nav a:hover i {
52    display: none;
53}
54.nav a:hover b {
55    display: block;
56}