I'm trying to create styles where icons are wrapped in tags. When you click the icon, it will change color so you know it's been clicked. Once you reload the page, the icons will go back to the original unclicked color. This will be used for a page that will have tens/hundreds of icons, in something like a table; so that's why it's important to see what has been clicked.
a {
text-decoration: none;
}
.dog-icon:before {
content: "\f6d3";
font-family: 'Font Awesome 5 Free';
font-size: 40px;
font-weight: 900;
padding: 40px;
}<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<div style="margin-top: 40px;">
<a href="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=1.00xw:0.669xh;0,0.190xh&resize=1200:*" target="_blank" class="dog-icon"></a>
<a href="https://www.cdc.gov/healthypets/images/pets/angry-dog.jpg" target="_blank" class="dog-icon"></a>
<a href="https://media.npr.org/assets/img/2021/04/27/prancer_wide-db59609b5bd96c9e56e4dfe32d198461197880c2.jpg?s=1400" target="_blank" class="dog-icon"></a>
<a href="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2019/10/08113321/Dog-behavior-Kasper-Luijsterburg.jpg" target="_blank" class="dog-icon"></a>
<a href="https://i.ytimg.com/vi/EVqxcWQOEnU/maxresdefault.jpg" target="_blank" class="dog-icon"></a>
</div>If you add a bit of JavaScript code, it can be done quite easily:
document.querySelector(".links").onclick=ev=>{if(ev.target.tagName=="A")
ev.target.className="done"
}.links a {
text-decoration: none;
font-family: 'Font Awesome 5 Free';
font-size: 40px;
font-weight: 900;
margin: 20px;
}
.links a.done { color:green }<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<div class="links" style="margin-top: 40px;">
<a href="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=1.00xw:0.669xh;0,0.190xh&resize=1200:*" target="_blank"></a>
<a href="https://www.cdc.gov/healthypets/images/pets/angry-dog.jpg" target="_blank"></a>
<a href="https://media.npr.org/assets/img/2021/04/27/prancer_wide-db59609b5bd96c9e56e4dfe32d198461197880c2.jpg?s=1400" target="_blank"></a>
<a href="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2019/10/08113321/Dog-behavior-Kasper-Luijsterburg.jpg" target="_blank"></a>
<a href="https://i.ytimg.com/vi/EVqxcWQOEnU/maxresdefault.jpg" target="_blank"></a>
</div>If you just want to know what was clicked and do not want to keep track across page reloads, add one event handler to the window, look for the anchor that was clicked, and add a class.
window.addEventListener("click", function (evt) {
const link = evt.target.closest("a");
if (link) link.classList.add("clicked");
});a {
text-decoration: none;
}
.dog-icon:before {
content: "\f6d3";
font-family: 'Font Awesome 5 Free';
font-size: 40px;
font-weight: 900;
padding: 40px;
}
a.clicked {
color: green;
}<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<div style="margin-top: 40px;">
<a href="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=1.00xw:0.669xh;0,0.190xh&resize=1200:*" target="_blank" class="dog-icon"></a>
<a href="https://www.cdc.gov/healthypets/images/pets/angry-dog.jpg" target="_blank" class="dog-icon"></a>
<a href="https://media.npr.org/assets/img/2021/04/27/prancer_wide-db59609b5bd96c9e56e4dfe32d198461197880c2.jpg?s=1400" target="_blank" class="dog-icon"></a>
<a href="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2019/10/08113321/Dog-behavior-Kasper-Luijsterburg.jpg" target="_blank" class="dog-icon"></a>
<a href="https://i.ytimg.com/vi/EVqxcWQOEnU/maxresdefault.jpg" target="_blank" class="dog-icon"></a>
</div>you can try using the :active selector for your a tags.
for example:
a:active{
(enter css here)
}
i'm new to css so it might not work, but it's worth a try.