Use CSS para reemplazar el icono con texto cuando se desplaza
@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
.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;
}
Drab Dingo
