Board Thread:Support Requests - Getting Technical/@comment-39340968-20200225033700/@comment-9605025-20200225043417

It took some time to figure out what was going on and write a reply. Apparently you got help in that time. That is great! There are still some things I would like to bring up though. Since I don't feel like re-writing my reply, I am just going to post it as it was. So if parts are addressing something that has already been fixed, that is why. - Well, first thing is first. I just learned something new. I thought the contents of the before and after pseudo-elements had to be text but apparently even IE11 can handle image URLs.

To address the issue as posed, the problem is that your CSS for the subtle link is missing the url function. What you have right now is: content: "https://vignette.wikia.nocookie.net/viacom4633/images/2/23/Staff_Icon.png/revision/latest?cb=20200222232032"; This is interpreted as a string and thus the literal URL is shown. What you want is what you used for the other links: content: url("https://vignette.wikia.nocookie.net/viacom4633/images/2/23/Staff_Icon.png/revision/latest?cb=20200222232032"); That being said, you might notice that the image is way larger than the text and is throwing off the alignment on things like Special:RecentChanges. You can fix this by using Vignette's scaling capability. For instance, this will display a version of the image that has been scaled down to a height of 14px. content: url("https://vignette.wikia.nocookie.net/viacom4633/images/2/23/Staff_Icon.png/revision/latest/scale-to-height-down/14?cb=20200222232032"); I would also suggest getting rid of the query string (the "?cb=20200222232032"). It doesn't actually hurt anything but it just isn't necessary.

Note that with this solution, the size of the image will be fixed and will not adjust with the font size. If you want something that will adjust with the font size, then you need to include the image a different way; the way I usually do things like this. content: ""; display: inline-block; height: 1em; width: calc(( / ) * 1em) background-image: url("https://vignette.wikia.nocookie.net/viacom4633/images/2/23/Staff_Icon.png/revision/latest"); background-size: contain; background-position: center center; background-repeat: no-repeat; Replace  and   with the width and height of the image you are using. Right now, the width is 55 and the height is 54. That is essentially a square so you could also simplify the width assignment to just be "1em".