How to automatically change icons based on user input
Adding icons to custom links (whether through text options or using {block:HasPages}) can be tricky when you can't guarantee what users will want their links to be.
Using some attribute selectors, we can change the icon based on the content in the href attribute.
I'm using Font Awesome for this tutorial, but any icon font that uses unicodes in pseudo elements (:before or :after) will work!
<a href="{URL}"><i class="fa fa-link"></i> {Label}</a>
By default, it will be the link icon. I can change this icon if a user is adding a tag as a link by selecting any link with "/tagged" in its url:
.links a[href*="/tagged"] i:before {
A breakdown of why/how this works and more examples:
Let's start with the first part
This is selecting all of the anchor tags inside of our links container
.links a[href*="/tagged"]
is selecting the href attribute that is inside of a link.
it would only select links with that exact match.
by adding the *, i'm selecting any link that contains /tagged somewhere in the link. this way we can select *all* tags, not just one tag at a time.
.links a[href*="/tagged"] i
This is only selecting the i elements inside of links that contain /tagged. This is important because otherwise we would be selecting every i element, but we only want to change the tag links.
.links a[href*="/tagged"] i:before
and lastly we are selecting the :before pseudo element that Font Awesome uses to add icons.
What else can I do with this?
You can do a lot with attribute selectors! You could repeat this process for other links like discord, twitch, about pages, faq, etc.
Here is how you would target external links:
a[href^="https://"]:not([href*="tumblr.com"])
or if you wanted to include the possibility of http:// you could do either of these:
:where(a[href^="https://"], a[href^="http://"]):not([href*="tumblr.com"])
a[href*="://"]:not([href*="tumblr.com"])
You can read more about attribute selectors here!
