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!
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 {
content:’\f292’;
}
A breakdown of why/how this works and more examples:
Let’s start with the first part
.links a
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.
If I were to do
.links a[href=“/tagged”]
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 coulddo either of these:
Here’s ya boi barras talking about another (?) incindent with collot and robespierre but im even more confused now, it sounds like a deja vu of the window one… they’re fighting over a proscription list that was attributed to robespierre, but he was actually against it so he blames the rest of the cps for it, then says more or less the same thing from the other anecdote about how they’re “decimating the convention” which pisses collot off, but this time he just grabs him by the collar?
“he seeks to impute us that of which he alone is capable” ok collot fusilades d'herbois, sure
then Barras helps separate them and Robespierre leaves while threatening to “unmask them to the convention”, Barras follows him home and they have this awkward-ass interaction hsdkfgsdfg
