<nav id="social">
<a href="https://facebook.com"></a>
<a href="https://twitter.com"></a>
</nav>
html, body {
height: 100%;
}
body {
display: grid;
justify-items: center;
align-items: center;
}
a {
display: flex;
align-items: center;
color: #333;
font-size: 1.5em;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
[href]::before {
content: " ";
margin: 0 10px 0 0;
font-family: "Font Awesome 5 Brands";
font-weight: 400;
font-size: 1.2em;
}
[href*="facebook"]::before {
content: "\f09a";
}
[href*="twitter"]::before {
content: "\f081";
}
[href*="instagram"]::before {
content: "\f16d";
}
[href*="linkedin"]::before {
content: "\f08c";
}
[target]::after {
content: "\f35d";
display: inline-block;
margin: 0 10px 0 0.75em;
color: #999;
font-family: "Font Awesome 5 Free";
font-weight: 400;
font-size: 0.6em;
}
const social = document.getElementById('social')
const facebook = social.firstElementChild
const twitter = facebook.nextElementSibling
// Updating an attribute
facebook.setAttribute('href', 'https://instagram.com')
facebook.textContent = facebook.getAttribute('href')
// Adding an attribute
facebook.setAttribute('target', '_blank')
// updating an attribute
twitter.href = 'https://linkedin.com'
twitter.textContent = twitter.href
// adding an attribute
twitter.target = '_blank'
This Pen doesn't use any external JavaScript resources.