In StackExchange sites, tags for questions are listed in horizontally and depends on the contents of tags, I want to place a customised icon in front of the tag list. This can be done with a simple CSS. First, let’s understand the HTML semantics here in StackExchange.

In element <div> you will find tag name appears as class name with a t- prefix. For example:

    canada
    business
    tips

Use CSS to create a space in front of the tags bar (by using padding) and add a background image like this:

.t-canada {
    padding: 0 0 0 [IMAGE WIDTH]px;
    background: url(http://[URL]/canada_flag.gif) no-repeat 0 50% transparent;
}

There! You have an ‘canada’ related icon appear in front of the tags bar when ‘canada’ tag is mentioned.

This will only show 1 image per question and that’s its feature. If multiple tags are triggered to show icon, then the later one in CSS will be shown. So sort your tags priority if needed.

Short come

This is sort of semi-automatic, you will have to update/add CSS whenever you have new tag you want to trigger.

Something to watch out for

In ‘Unanswered’ page, the tags bar is fixed width of 410px. Adding paddings may cause your tags bar move to undesired position (below user-info box rather the next to it). This can be resolved by modify tags bar width:

.excerpt .t-canada {
    width: [410 - PADDING WIDTH]px !important;
}

Potential Problem

If your tags ever have more than 1 line, the position of your image may seems weird as it will sit in the left middle of 2 lines. I’m not taking this into account as having maximum of 5 tags to go over 410px is kind of hard with default font-size and margin.

However if it bothers you, you can change the backgroup position to appear on top left corner instead:

.t-canada {
    padding: 0 0 0 [IMAGE WIDTH]px;
    background: url(http://[URL]/canada_flag.gif) no-repeat 0 0 transparent;
}

Alternative Solution

If you want icon to appear inside individual tag instead of beginning of tags bar, then you will need to use some javascript trick to make it happen. OR maybe in the coming beta(s), we can have tag name in <a> element like this:

    happy

Note: pt- prefix stands for post tag.

Feel free to leave your feedback on StackExchange Meta or commenting on this post.

Here is a very simple tutorial on how you can automatically insert an icon image after external (also known as off-site) links by using jQuery javacript framework.

For those who are not familiar with jQuery:

jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. It was released January 2006 at BarCamp NYC by John Resig.

Description of jQuery quoted from Wikipedia.

Reason I choose to go with javscript implementation instead of pure CSS is so that you do not have go through your entire blog to specified every link that you want to be marked as external link – leave this job to computer!

(Note: You also able to achieve this automatically using CSS3 selector, however CSS3 implementation is still in draft and is still not fully supported by browsers.)

I will be using jQuery 1.3.2, the latest version to-date. Add the follwing javscript to your page:

This javascript selects anchors that has target=”_blank” attributes on them and gives those anchors a new class “external_icon”.

Next step would be applying style to those anchors with “external_icon” class:

a.external_icon {
	background: url(images/external-link.gif) no-repeat 100% 50%;
	padding-right: 12px;
}

That’s it! 2 steps, very simple as promised. However couple of things you may want to watch out for. Below is couple of tweaks you may consider adding.

Image Exception

Having a small external link icon next to an image looks worse than without it, you may examption to anchored images by:

Specified Anchor Exclusion

If there are certain links in the post that you feel like not having an external link icon and want to exclude them from applying the style, then specified a “no_external_icon” class to those links and have your javascript code as follow:

Now you have it! Try the code out yourself!

Edit on 2009-05-12:

Thanks to J Mehmett for pointing out that target="_blank" is invalid in XHTML 1.0 Strict (however remain valid in XHTML 1.0 Transitional and HTML 4.01 Transitional as target attribute is not yet deprecated).

In that case:

Specified Relationship Inclusion

Advanced web developers has slowly stop the usage of target and using rel attribute instead.

Without too much trouble, we can achieve the same result by using above!