Hyperlink Icon

1 27

Written by

FajarPurnama

Interested in Freedom of Everything and Censorship Resistance.

4 years ago

Description

Hyperlink icons are icons applied with hyperlinks. When the icon is clicked, the clicker will open the link designated by the creator of the hyperlink icon. The purpose in my opinion is to beautify and simplify links where there is a saying the a single picture can mean a thousand words. In this case, icon is a very small image which I have seen no larger then 100 pixels (px). I see hyperlink icons are mostly used to link creators' social media profile. Which do you prefer, a text link or a hyperlink icon or both?

It depends on the context. If you want to just hyperlink your text passage, then just simply hyperlink a text. If you want it to be permanently part of a webpage layout, then just a hyperlink icon is best because it is small that saves space but still delivers sufficient information for the audience to understand and additionally, icons usually beautifies the webpage. If the platform nor the icon is known, then having both hyperlink text and icon is better to promote them.

Making Hyperlink Icons

There are two knowledge that you need to make an hyperlink icon. First is making a hyperlink. Second is inserting an image. Additionally, third is beautifying but for me is only knowing how to configure the size but there are more like handling paddings and margins if you want to go deeper.

If you are using an html editor where it is mostly available on most posting platforms, then you don't need to do much. However, if you are editing a blog's or a website's layout, then you probably need to learn some codings. The basic hypertext markup language (HTML) is still mainly used eventhough there are other languages such as markdown (MD).

Making Hyperlink

The above code is a skeleton code to make a hyperlink in html. The "a" tag is usually associated with links, the link is put inside the href="", and the text is put inside the a href="" (here) a.

The above hyperlink code have the link https://twitter.com/0FajarPurnama0 and the text "follow me on Twitter".

Inserting HTML Image

The above code is a skeleton code to make an image in html. The "img" tag is usually associated with images, and the image source location is put inside the src="". The image source should be an actually image where it is usually identified by either having a format such as .png .jpg .svg at the end of the link or when you try to download link, you will get an image file instead.

The above code source the image from https://0fajarpurnama0.github.io/assets/images/icon/twitter.png.

The above image html code have extra attributes which are "onerror" which is a JavaScript code that shows secondary image source if the primary image source is broken and "alt" which is a text that replaces the image view of the image source is broken.

Replacing the Text of Hyperlink with Icon

Finally to have an hyperlink icon is to replace the text in the hyperlink text code with the image html code. To add additional text, you can add texts before or after the image html code. Additionally, you can adjust the size of the icon by adding for example width="30" and height="30" on the image html code, but best practice is to have the icon image itself resized to reduce network load. If you want to go deeper, you can decorate the hyperlink icon with css style.

Icons location

It is up to you whether you want to put it on the header, footer, or sidebar. If you are on your own website, you know what to do, but if you are on a blogging platform then find the layout option and find a way to insert html and css. If you are in a posting only platform, then just put the icons on top or bottom of the post. If you want to see my icon collection, you visit this link