“Используйте CSS, чтобы заменить значок текстом при проведении” Ответ

Используйте CSS, чтобы заменить значок текстом при проведении

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

Используйте CSS, чтобы заменить значок текстом при проведении

@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

Используйте 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>
Drab Dingo

Ответы похожие на “Используйте CSS, чтобы заменить значок текстом при проведении”

Вопросы похожие на “Используйте CSS, чтобы заменить значок текстом при проведении”

Больше похожих ответов на “Используйте CSS, чтобы заменить значок текстом при проведении” по CSS

Смотреть популярные ответы по языку

Смотреть другие языки программирования