Change FontAwesome icon with text on hover
19,288
Solution 1
Have to change your <li>
structure a little bit, like this:
<li class="home">
<a href="index.html"><i class="icon fa fa-home fa-2x"></i><b>Home</b></a>
</li>
Live demo: http://jsfiddle.net/evykes9q/9/
.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;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="nav">
<ul>
<li class="home">
<a href="index.html"><i class="icon fa fa-home fa-2x"></i><b>Home</b></a>
</li>
<li class="about">
<a href="about"><i class="icon fa fa-coffee fa-2x"></i><b>About</b></a>
</li>
<li class="projects">
<a href="#projects"><i class="icon fa fa-code fa-2x"></i><b>Projects</b></a>
</li>
<li class="contact">
<a href="#contact"><i class="icon fa fa-comment fa-2x"></i><b>Contact</b></a>
</li>
</ul>
</div>
Solution 2
This is your solution
@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;
}
<div class="nav">
<ul>
<li class="home">
<a href="index.html"><i class="icon fa fa-home fa-2x"></i><b>Home</b></a>
</li>
<li class="about">
<a href="about"><i class="icon fa fa-coffee fa-2x"></i><b>About</b></a>
</li>
<li class="projects">
<a href="#projects"><i class="icon fa fa-code fa-2x"></i><b>Projects</b></a>
</li>
<li class="contact">
<a href="#contact"><i class="icon fa fa-comment fa-2x"></i><b>Contact</b></a>
</li>
</ul>
</div>
Author by
Vasco
Updated on June 28, 2022Comments
-
Vasco almost 2 years
I'm trying to create a responsive feature to my website. Basicly what I want is to have font awesome icons for navigation, but when on computer if you hover the mouse over the icon, it changes into a word.
I've tried it via CSS, using
a:content:""
and thena:hover:content:""
I have never tried something like this before and I'd appreciate it if anybody could point out what I have to do to get it working.
Here's a 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; }
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <div class="nav"> <ul> <li><i class="icon fa fa-home fa-2x"></i><a href="index.html">Home</a></li> <li><i class="icon fa fa-coffee fa-2x"></i><a href="about">About</a></li> <li><i class="icon fa fa-code fa-2x"></i><a href="#projects">Projects</a></li> <li><i class="icon fa fa-comment fa-2x"></i><a href="#contact">Contact</a></li> </ul> </div>
NOTE: I know that my HTML and CSS text are overlapping, I just want to provide everything I've tried already.
-
Vasco about 9 yearsIt's more organized then what I had, that's for sure :) But it still doesn't do what I wanted it to do. I want to have a visible icon, and when you hover the mouse over the icon, it replaces it with a word. Such as home, about, projects, contact.