Change FontAwesome icon to text on hover

Question

How do I replace an icon with text on hover?

I am writing this site in React, however I have altered it so that it appears correctly in JSFiddle. When I hover over one of the bubble's, I would like the text from the title="..." of the a tag to show up.

For example, when I hover over the GitHub bubble, I would like for "GitHub" to replace the icon that is in the bubble.

Here's a JSFiddle

I have tried adding a <p>GitHub</p> within the a tag and adding css to make it appear on hover. However, I could not get it to work. Not sure if that was the right approach or if I was setting the css properties incorrectly.

Answer 1

While a pure css solution would require you to just add a single span element inside each anchor tag like:

<span class="icon_title">Github</span>

with the following css:

.bubble .icon_title{
  display:none;
}
.bubble:hover .icon_title{
  display:initial;
}
.bubble:hover .icon{
  display:none;
}

But if you would realy like to use the title attribute for each anchor tag you could also go for this javascript aproach:

var bubbles = document.querySelectorAll('.bubble a'); // Get all anchor tags inside bubbles in an array
for(const bubble of bubbles){ // Loop through each bubble
  let newSpan = document.createElement('span'); //create a bew span element
  newSpan.innerHTML = bubble.title; // Add the title of each anchor tag to the span element
  newSpan.classList.add('icon_title') // Give your new span element a class
  bubble.appendChild(newSpan); // Add the new span element to your bubble
} 

*Note that you still need to add the above css, but creating each span element inside the HTML is no longer needed as this is done by JS, with the appropriate title.

Working snippet (font awesome icons not loading properly, but they should in your code):

 var bubbles = document.querySelectorAll('.bubble a'); // Get all anchor tags inside bubbles in an array for(const bubble of bubbles){ // Loop through each bubble let newSpan = document.createElement('span'); //create a bew span element newSpan.innerHTML = bubble.title; // Add the title of each anchor tag to the span element newSpan.classList.add('icon_title') // Give your new span element a class bubble.appendChild(newSpan); // Add the new span element to your bubble }

 .App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(48px + 2vmin); color: white; }.bubble { display: inline-block; background-color: transparent; border: 3px solid gray; margin: 15px; border-radius: 50%; } a { display: table-cell; vertical-align: middle; text-align: center; height: 100px; width: 100px; }.bubble.icon_title{ display:none; }.bubble:hover.icon_title{ display:initial; }.bubble:hover.icon{ display:none; }

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <header className="App-header"> <div> <span class="bubble"> <a title="GitHub" href="https://github.com/{username}" target="_blank " rel="noopener noreferrer"> <i class="icon fab fa-github fa-2x"></i> </a> </span> <span class="bubble"> <a title="LinkedIn" href="https://www.linkedin.com/in/{username}/" target="_blank " rel="noopener noreferrer"> <i class="icon fab fa-linkedin fa-2x"></i> </a> </span> <span class="bubble"> <a title="Resume" href="resume.pdf" target="_blank " rel="noopener noreferrer"> <i class="icon fab fa-linkedin fa-2x"></i> </a> </span> <span class="bubble"> <a title="Email" href="mailto:{email}" target="_blank " rel="noopener noreferrer"> <i class="icon fas fa-envelope fa-2x"></i> </a> </span> </div> </header>

Answer 2

*Just if you are in a hurry, check here for a JS fiddle implementing all that is said below.

For a purely CSS solution, here is your best bet

• Wrap the <i> tag which holds your icon inside a div
• Add another <div> which contains a <span> element that holds the text you want

The finished HTML for each link should look something like:

<a title="GitHub" href="https://github.com/{username}" target="_blank " rel="noopener noreferrer">
  <div>
    <i class="icon fab fa-github fa-2x"></i>
  </div>
  <div>
    <span>Github</span>
  </div>
</a>

Then in your stylesheet,

• Change the color of your <a> tags to a color other than white so the icon and the text in it is visible
• Set position: relative on your <a> tags

Then add the following style rules to set the positioning of the elements and the behaviour of the link child elements on hover

a > div {
  position: absolute;
  top: 0; bottom: 0;
  right: 0; left: 0;
  display: flex;
  border-radius: 100%;
}

a > div > .icon,
a > div > span {
  margin: auto;
  transition: all ease-in-out 250ms;
}

a > div > span {
  opacity: 0;
}

a:hover > div > .icon {
  opacity: 0;
}

a:hover > div > span {
  opacity: 1;
}

You can add more functionality to it but this works.

Check here for a JS fiddle implementing all that is said above.

Best of luck:)