Предположим, что у нас есть обычный header:
Html:
<header class="header">
<div class="container">
<div class="logo">
<span class="home">Home</span>
<a class="first_nav_link" href="#">work</a>
<a class="first_nav_link" href="#">faq</a>
</div>
<a class="second_nav_link" href="#">log in</a>
</div>
</header>
CSS:
.header {
width: 100%;
max-width: 1600px;
height: 100%;
padding-top: 10px;
font-family: 'Montserrat', sans-serif;
background-color: #111111;
}
.container {
display: flex;
justify-content: space-between;
padding-bottom: 10px;
margin: 0px 20px 0px 20px;
}
.logo {
color: #fff;
margin: 0 15px;
font-family: 'Montserrat', sans-serif;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.home {
font-weight: bold;
font-size: 20px;
}
.first_nav_link {
color: #fff;
font-family: 'Montserrat', sans-serif;
font-weight: normal;
letter-spacing: 1.5px;
text-decoration: none;
margin: 10px;
}
.second_nav_link {
color: #fff;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-weight: normal;
letter-spacing: 1.5px;
text-transform: uppercase;
}
Как для определенной ссылки изменить ее текст на изображение или иконку?То есть, при экране с максимальной шириной 480 пикселей нужно поменять текст в ссылке на иконку.