Link Icons Demystified

by Ernie Simpson, a.k.a. The Big Erns

Because of the number of responses to my recent use of icons in links, I posted a brief description of the technique at the Freewaytalk forum. A few users had trouble with the instructions, so I will repeat them here (hopefully more clearly) and provide a Freeway 4 Pro file that users can download to dissect.

Step 1: Assign a Class Style to a Link

The foundation of this technique is an idea that Walter Davis gave to me about defining class styles for hyperlinks. When I sat down to work out the process within Freeway 4 Pro, the solution turned out to be fairly simple – due in no small way to the almost prescient flexibility the creators built into the application.

First we start with a hyperlink. Select the text you want to link from, then go to menu»Edit»Hyperlink… ( or press command+k ). Set your link target in the Hyperlink window normally, but before you leave open the Extended Attribute window and create a new attribute of class with the value of whatever the name of your link style will be. Here I am using the name linkaway. Figure A

Now we have class style attached to our link. But because we haven’t yet defined any link styles yet, the link appears normal.

Step 2: Style the Hyperlinks

We could put all the style attributes for our links into the new class style we just made, but CSS is more flexible than that. For our example, and on this page, I use the a and a:hover styles to set the color and text-decoration attributes of all my links, including our new link class. That way we don’t have to re-define those attributes for styles that don’t change their values.

There is more than one acceptable way to style hyperlinks using CSS in Freeway 4 Pro, but in this demonstration I’ll be sticking to my favorite. For a broader discussion of link styles in Freeway 4 Pro, I suggest you search the forum topics.

We can set all link and hover colors with these two tag styles:

a { color: #228b22 }

a:hover { color: #dc143c; text-decoration: none }

I am fond of underlines for ordinary links, but want some visual activity when the user mouses over the link, so I set the hover style to remove the underline. Now our link, like all links, look like this:

Step 3: Add a Background Image

If you’ve never applied a background image to text with CSS before, it really isn’t much different than applying it to HTML boxes, or table cells for that matter. It just seems different because we’re not used to thinking of text as a “container” element. The groovy thing is, that it is.

Since we already have styles to cover color and decoration, we are free to target our class style with a background-image attribute. So let’s create a new style, and in the Tag field call it a.linkaway (the a tag plus the class link name that we gave our hyperlink). Remember to leave the Name field blank. Figure B

Toggle down the background-image attribute from the Character attributes and select the icon graphic you wish to choose. I have been using these icons from famfamfam. After you select it, use the same pop-up control to set the background-repeat to none.

We can only see a portion of our icon through the text. This is because the text acts as a window for our image, much like a div/box that is too small to reveal the entire image. In the same way, we need to make that window larger, and the tool we will use to do that is the padding attribute.

There are several ways to define the padding attribute, referenced here. Go back to our a.linkaway style and open the Extended attribute window. Create a new extended attribute and name it padding. For the value, we are going to set all four sides of our text at one time. When we do that, we start with the amount for the top and move clockwise for the right, bottom, and left amounts. For the top and bottom amounts, we don’t want too large a number, or else we risk pushing the text above or below out of place, so I first try the smallest amount, which is 1px. We also want to make room on the right side for the width of the icon, which I expect will be about 18px. Figure C

The placement of our background image is controlled by the background-position attribute, which is referenced in detail here. For our purposes we will use center right to center the image in the container vertically, and align it to the right side. Figure D

Wrapping it up

Our link is looking pretty good now, but I would like to add a small space just after the icon. Because the image position is at the edge of the text window, increasing the padding amount just moves the image further right. To add space to the outside of the text window we rely on the margin attribute. Figure E

Excellent! The simplicity of this method is revealed the first time you decide you want a different icon, or want to display it on the left side instead of the right… Just change the class style attributes and all associated links will be updated automatically. Another plus for code purists like myself is this method doesn’t burden the page content with a bunch of decorative elements. Sweet.

And it’s all done within Freeway 4 Pro – no extra code editors needed.

CSS Styles Used Here…

a {

color: #228b22 }

a:hover {

color: #dc143c;

text-decoration: none }

a:visited {

color: #008b8b;

text-decoration: none }

a.linkaway {

background-image: url("../Resources/page_white_go.png");

background-repeat: no-repeat;

background-position: center right;

margin-right: 2px;

padding: 1px 18px 1px 1px }

This page was made with Freeway 4 Pro. Download the Freeway 4 Pro source files (283.16 K)