我正在尝试为我的网站创建一个响应式功能.基本上我想要的是使用字体很棒的导航图标,但是当你在计算机上将鼠标悬停在图标上时,它会变成一个单词.
我已经通过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) { …