Click the above image for basic sourced and click following button for processing token source code.
Ethereum and EVM (ETC, BSC, AVAX-C-Chain, Polygon, etc).
Telegram Open Network (TON) decentralized application.
Solana decentralized application.
Tron decentralized application.
Near decentralized application.
Wax decentralized application.
Myalgo wallet for Algorand decentralized application.
Sync2 wallet for Vechain decentralized application.
Scatter wallet for EOS decentralized application.
Anchor Link wallet for EOS decentralized application.
Ontology decentralized application.
Rabbet wallet for Stellar Lumen decentralized application.
Freighter wallet for Stellar Lumen decentralized application.
Hive Signer for Hive decentralized application.
Hive Key Chain for Hive decentralized application.
Zilpay wallet for Zilliqa decentralized application.
Neoline wallet for Neo N2 decentralized application.
Neoline wallet for Neo N3 decentralized application.
Keplr wallet for Cosmos and other decentralized application.
Keeper wallet for Waves decentralized application.
IWallet for IOST decentralized application.
Hyperlink Icon
Get 60 0FP0EXP Token to remove widget entirely!
Get 50000 0FP0EXP Token to remove my NFTS advertisements!
Description
<p>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 <em>a single picture can mean a thousand words</em>. 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?</p>
<ul>
<li><a href="https://twitter.com/0FajarPurnama0">https://twitter.com/0FajarPurnama0</a></li>
<li>
<a href="https://twitter.com/0FajarPurnama0"><img width="30" height="30" src="https://404store.com/2020/02/10/twitter.png" onerror="this.onerror=null;this.src='https://0fajarpurnama0.github.io/assets/images/icon/twitter.png';" alt="twitter" /></a>
</li>
<li>
<a href="https://twitter.com/0FajarPurnama0"><img width="30" height="30" src="https://404store.com/2020/02/10/twitter.png" onerror="this.onerror=null;this.src='https://0fajarpurnama0.github.io/assets/images/icon/twitter.png';" alt="twitter" />Follow me on Twitter!</a>
</li>
</ul>
<p>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.</p>
Making Hyperlink Icons
<p>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.</p>
<p>If you are using an <a href="https://html-online.com/editor/">html editor</a> 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).</p>
<h3 id="hyperlink">Making Hyperlink</h3>
<!-- HTML generated using hilite.me -->
<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007700"><a</span> <span style="color: #0000CC">href=</span><span style="background-color: #fff0f0">""</span><span style="color: #007700">></a></span>
</pre></div>
<p>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 <em>a href="" (here) a</em>.</p>
<!-- HTML generated using hilite.me -->
<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007700"><a</span> <span style="color: #0000CC">href=</span><span style="background-color: #fff0f0">"https://twitter.com/0FajarPurnama0"</span><span style="color: #007700">></span>https://twitter.com/0FajarPurnama0<span style="color: #007700"></a></span>
</pre></div>
<p>The above hyperlink code have the link <a href="https://twitter.com/0FajarPurnama0">https://twitter.com/0FajarPurnama0</a> and the text "follow me on Twitter".</p>
<h3 id="htmlimage">Inserting HTML Image</h3>
<!-- HTML generated using hilite.me -->
<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007700"><img</span> <span style="color: #0000CC">src=</span><span style="background-color: #fff0f0">""</span> <span style="color: #007700">/></span>
</pre></div>
<p>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.</p>
<!-- HTML generated using hilite.me -->
<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007700"><img</span> <span style="color: #0000CC">src=</span><span style="background-color: #fff0f0">"https://0fajarpurnama0.github.io/assets/images/icon/twitter.png"</span> <span style="color: #007700">/></span>
</pre></div>
<p>The above code source the image from <a href="https://0fajarpurnama0.github.io/assets/images/icon/twitter.png">https://0fajarpurnama0.github.io/assets/images/icon/twitter.png</a>.</p>
<!-- HTML generated using hilite.me -->
<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007700"><img</span> <span style="color: #0000CC">src=</span><span style="background-color: #fff0f0">"https://0fajarpurnama0.github.io/assets/images/icon/twitter.png"</span> <span style="color: #0000CC">onerror=</span><span style="background-color: #fff0f0">"this.onerror=null;this.src='https://404store.com/2020/02/10/twitter.png';"</span> <span style="color: #0000CC">alt=</span><span style="background-color: #fff0f0">"twitter icon which is a blue bird"</span><span style="color: #007700">/></span>
</pre></div>
<p>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.</p>
<h3 id="replacelinktext">Replacing the Text of Hyperlink with Icon</h3>
<!-- HTML generated using hilite.me -->
<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007700"><a</span> <span style="color: #0000CC">href=</span><span style="background-color: #fff0f0">"https://twitter.com/0FajarPurnama0"</span><span style="color: #007700">><img</span> <span style="color: #0000CC">class=</span><span style="background-color: #fff0f0">"myicon"</span> <span style="color: #0000CC">src=</span><span style="background-color: #fff0f0">"https://404store.com/2020/02/10/twitter.png"</span> <span style="color: #0000CC">onerror=</span><span style="background-color: #fff0f0">"this.onerror=null;this.src='https://0fajarpurnama0.github.io/assets/images/icon/twitter.png';"</span> <span style="color: #0000CC">alt=</span><span style="background-color: #fff0f0">"twitter"</span><span style="color: #007700">/></a></span>
</pre></div>
<p>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.</p>
Icons location
<p>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 <a href="http://raboninco.com/22989623/hyperlink-icon-collection">link</a></p>
<figure>
<img src="https://404store.com/2020/04/17/blogger-layout-social-media-icon-location.png" onerror="this.onerror=null;this.src='https://images.hive.blog/640x0/https://images.hive.blog/DQmby5vmdt5McEkxpHQQTDfz94Rm2bYrXBgeYX2QaBxCuYN/blogger-layout-social-media-icon-location.png';" alt="https://file.army/i/BY5jQQV" />
<figcaption><a href="https://0darkking0.blogspot.com">https://0darkking0.blogspot.com</a></figcaption>
</figure>
<h2>Mirror</h2>
<ul>
<li><a href="https://www.publish0x.com/0fajarpurnama0/hyperlink-icon-xjnykm?a=4oeEw0Yb0B&tid=hicc">https://www.publish0x.com/0fajarpurnama0/hyperlink-icon-xjnykm?a=4oeEw0Yb0B&tid=hicc</a></li>
<li><a href="https://0fajarpurnama0.github.io/internet/2020/04/17/hyperlink-icon">https://0fajarpurnama0.github.io/internet/2020/04/17/hyperlink-icon</a></li>
<li><a href="https://medium.com/@0fajarpurnama0/hyperlink-icon-7c2fbad9ce82">https://medium.com/@0fajarpurnama0/hyperlink-icon-7c2fbad9ce82</a></li>
<li><a href="https://hicc.cs.kumamoto-u.ac.jp/~fajar/internet/hyperlink-icon">https://hicc.cs.kumamoto-u.ac.jp/~fajar/internet/hyperlink-icon</a></li>
<li><a href="https://0fajarpurnama0.tumblr.com/post/614537946118455296/why-a-strong-password-is-needed">https://0fajarpurnama0.tumblr.com/post/614537946118455296/why-a-strong-password-is-needed</a></li>
<li><a href="https://0darkking0.blogspot.com/2020/04/hyperlink-icon.html">https://0darkking0.blogspot.com/2020/04/hyperlink-icon.html</a></li>
<li><a href="https://hive.blog/social-media/@fajar.purnama/hyperlink-icon?r=fajar.purnama">https://hive.blog/social-media/@fajar.purnama/hyperlink-icon?r=fajar.purnama</a></li>
<li><a href="https://0fajarpurnama0.cloudaccess.host/index.php/uncategorised/33-hyperlink-icon">https://0fajarpurnama0.cloudaccess.host/index.php/uncategorised/33-hyperlink-icon</a></li>
<li><a href="https://steemit.com/social-media/@fajar.purnama/hyperlink-icon?r=fajar.purnama">https://steemit.com/social-media/@fajar.purnama/hyperlink-icon?r=fajar.purnama</a></li>
<li><a href="http://0fajarpurnama0.weebly.com/blog/hyperlink-icon">http://0fajarpurnama0.weebly.com/blog/hyperlink-icon</a></li>
<li><a href="https://0fajarpurnama0.wixsite.com/0fajarpurnama0/post/hyperlink-icon">https://0fajarpurnama0.wixsite.com/0fajarpurnama0/post/hyperlink-icon</a></li>
<li><a href="http://www.teiii.cn/hyperlink-icon/">http://www.teiii.cn/hyperlink-icon/</a></li>
</ul>