How to Place an Icon After a Link
Placing an icon after a link on a web page is not that difficult as long as you follow some techniques to perform this task. Web developer and web designers across the world use the CSS tool to add small icons in front of certain types of links. Users can access detailed information by clicking the icon placed in front of a link. For example, an icon can be placed next to the link to alert the user that the link contains a word document or a computer application.
Things Required:
– HTML or text editor
– Web page
Instructions
-
1
The CSS method works fine with standard compliant browsers including Google Chrome Internet Explorer and Mozilla Firefox. Essentially, the technique uses the after pseudo class. Before attempting to place an icon on a web page, make sure you have some basic computer knowledge. You will also be required to pay attention to details when performing this task.
-
2
Considering the icon will be used to show that the link contains a word document, the web designer must define the file as a .doc file for the link and icon to work properly. It is recommended to use CSS selector .doc after. This gives a command to the software that converts a hyperlink into a .doc file reader. Use the rule given below for indicating a link to a .doc file.
The CSS rule would be
a.doc:after {
content: url(pdficon.gif);
}
It is also recommended to use an icon named .docicon.gif for the url given on a webpage. -
3
You will be required to add the class to the HTML to make this command work. Make sure the link looks like href="somefile.doc". Any link containing a word document will automatically use the icon as defined by the CSS rule in the software.
-
4
Sometime you may also need to create a style rule for the pdf or doc files. Adding some space after the link will ensure the icon is not placed on top of the link. Use padding right to perform this task efficiently. Width of the icon usually determines the width allowed for this operation.
-
5
Go online if you face any issues as there are many different forums or websites that can give you some excellent advice, tricks or tips for placing an icon after a link. Try to get some professional or expert advice online from a forum post. There are many video tutorials that are also available that can further assist you in this task.
