Laura Charles Johnson, a 20-year veteran of the government contracting scene as a technical writer and online help developer, is a certified Advanced Flare Developer and Trainer, and was a featured speaker at MadWorld 2013. She also writes a blog about Flare at www.flareforhelp.com, where we found this great post about adding icons to show file types in links. We’ve re-published it here (w_ith Laura’s permission) for you to check out:_
I could have titled the post “Using Attribute Selectors” but a) that’s boring and b) if you don’t know what an attribute selector is, you won’t know how awesome this trick is.
Essentially, I want certain links in my help system to show what file format they are via a cute little icon that appears without me having to remember to do this every single time.
And how is this done? All together now….
CSS! Woot!
It’s done through attribute selectors and it’s wonderful: saves time and adds consistency.
Here’s what I want to achieve:
What I don’t want to do is take the time to insert a little tiny icon every time I add a hyperlink to my help. First, there’s no chance I’ll remember to do it…and secondly, what a time sink! No way!
Instead, via CSS, I want an icon automatically added to hyperlinks based on what file type it is.
Here we go:
***I am using CSS3 code here – meaning if you’re building for users with IE7 or lower, the icons will not appear. The good news: The links will still work. So there is a graceful degradation.***
I’m going to use icons for Word docs, zipped files, PDF files, and JPGs. I create a list of links to files and I have this:
It’s kinda boring – but entirely functional. But I want to add some pizzazz, some icons. I’m using the four circled below. I can use this technique for any file type – but I’m just using these four in this example.
For the thrilling conclusion of this post, head on over to Laura's blog.
