“Anyone who slaps a ‘this page is best viewed with Browser X’ label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network.”

— Tim Berners-Lee

Note: while I’m no longer using special icons to indicate external links on the site, this is still a useful tip.

Another “text instead of image” trick like RSS in CSS is the small arrow icon you see next to external links. Some sites do that with small images. While checking out Wikki Wakka, I noticed theirs were actually text, rendering an HTML entity code of an infinity symbol — ∞ — which in the raw HTML is ∞

Splendid idea, I thought, but I didn’t want to do the same exact thing they had.

Enter the Web Design Group’s (WDG) HTML entities reference page, where you can find all sorts of neat letters and symbols, including the ⇒ “rightwards double arrow” or ⇒

And then Notanda, during its processing of my saved plaintext file entries, automatically adds that code at the end of external links.

On the previous version of this site, I had a couple of badges of the ubiquitous RSS/XML variety:

What’s different about them versus the run of the mill versions were that they were just text, not images like most versions. It’s all done in CSS. Here’s how.

For a given badge, enclose the text you want to appear in a paragraph block and make it a link. Give the paragraph a suitable class name. I used "feeds" for mine. Viz:

<p class="feeds"><a href="http://www.celsius1414.com/index.xml">RSS 2.0</a></p>

Then in your CSS file, use something along these lines:

.feeds a {
     background: orange;
     color: white;
     padding: 2px;
     border: outset thin;
     font-style: normal;
     font-weight: bolder;
     text-decoration: none;
}

Which will produce something like what you see in the picture. A simple trick, but useful for all sorts of things.

Check out External Link Icon for a related tip.