Display HTML-Links With Symbols

If you want to format your links using icons, you can achieve this through CSS. In addition to the actual link then an icon is displayed next to the link.

Using CSS, there are many ways to format a link. This is an example, how a link could look like:
https://www.andistips.com
With CSS you can easily alter the appearance of the link:
https://www.andistips.com
The used CSS class looks like this:

<style>
a.formattedLink{ 
    font-family:Arial, Helvetica, Sans Serif; 
    font-weight:bold; 
    font-style:italic; 
    color:#aa00ff; 
    text-decoration:none; 
    border-bottom:dashed; 
}
</style>

The HTML sourcecode looks like this:

<a class="formattedLink" href="https://www.andistips.com">
https://www.andistips.com
</a>

If you want to add a icon or some other graphic beside the link, for example before or after the text, there is an easy way to do this by using CSS:

Example

In the following Example you’ll find a link with a prefixed icon:
You’ll find interesting tips on https://www.andistips.com.

The HTML-sourcecode for this Example looks like this:

<a class="external" href="https://www.andistips.com">https://www.andistips.com</a>

As you can see, a CSS class ‘external’ was assigned to the link. This class adds a background image to the link and makes this background-image appear on the left side of the link by using this CSS code:

<style>
a.extern {
    /* Indicates the icon that sould be used and uses it as a background-image. */
    background-image: url(path/to/image/iconlink.gif);
    /* Indicates the the background will not be repeated. */
    background-repeat: no-repeat;
    /* Aligns the image to the left */
    background-position: left;
    /* Space between left edge of the link and the beginning of the text */
    /* This has to be at least the width of the icon */
    padding-left: 15px;
}
</style>

Done! Now every link with the class ‘external’ has an icon ‘prefixed’.