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

Question

我正在尝试为我的网站创建响应功能。基本上我想要的是用于导航的字体很棒的图标，但是在计算机上如果将鼠标悬停在图标上，它会变成一个词。

我已经通过 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;
}

<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>

注意： 我知道我的 HTML 和 CSS 文本重叠，我只想提供我已经尝试过的所有内容。

Answer 1

我想有适合您的答案。我稍微改变了你的 HTML nth-child 不适合这个 http://jsfiddle.net/evykes9q/4/:

<div class="nav">
    <ul>
        <li class="home"><i class="icon fa fa-home fa-2x"></i><a href="index.html">Home</a>
        </li>
        <li class="about"><i class="icon fa fa-coffee fa-2x"></i><a href="about">About</a>
        </li>
        <li class="code"><i class="icon fa fa-code fa-2x"></i><a href="#projects">Projects</a>
        </li>
        <li class="contact"><i class="icon fa fa-comment fa-2x"></i><a href="#contact">Contact</a>
        </li>
    </ul>
</div>

CSS:

.nav ul .home {
    background: #a3d39c;
}
.nav ul .about {
    background: #7accc8;
}
.nav ul .code {
    background: #4aaaa5;
}
.nav ul .contact {
    background: #35404f;
}
.nav ul li:hover i:before {
    content:"";
}

Answer 2

必须稍微更改一下您的 <li> 结构，如下所示：

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

现场演示：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>

Answer 3

只需添加以下 CSS 即可完成，无需更改结构：

.nav ul li i{
    display: block;
}
.nav ul li:hover i{
    display: none;
}
.nav ul li a{
    display: none;
}
.nav ul li:hover a{
    display: block;
}

Fiddle

Answer 4

我更改了 dowomenfart fiddle 并添加了一些可见的规则：

New fiddle

您只需将文本的可见性设置为 none 并在悬停时显示它，并为图标设置反向：

.nav ul li i {
    display: block;
}
.nav ul li a {
    display: none;
}
.nav ul li:hover i {
    display: none;
}
.nav ul li:hover a {
    display: block;
}

Answer 5

这是你的解决方案

@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>

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

Change FontAwesome icon with text on hover

html

css

font-awesome