Tutorial: How to add non-DA account icons

Oct 16, 20176 min read

Deviation Actions

Published: Oct 16, 2017

459 Views

As you can see from my profile and this post: Thankyou to my Role Models November 20, 2016

there are icons for accounts from Youtube. I am not sure but most likely this code/method should work for all DeviantArt external (or non-Devianart) accounts. So try and experiment with Vimeo, Newgrounds, Facebook, Twitter, Instagram, Behance, SoundCloud etc.

I thought of making a quick tutorial and never have until now.

CODE:

NOTE: I changed the angle brackets/ inequality signs "<", ">" to parentheses to cause the code to stop working. Now it is inactive and you can see it in the journal but just remember to change the parantheses bck to angle brackets.

NOTE: Remove the ||INSERT YOUR OWN TEXT HERE|| boxes from within the quotation marks and add your own text.

(a href="||ACCOUNT URL||")(img src="||ICON URL||" title="||USERNAME||" width="50" height="50")(/a)

EXAMPLE:

NOTE: I changed the angle brackets/ inequality signs "<", ">" to parentheses to cause the code to stop working. Now it is inactive and you can see it in the journal but just remember to change the parantheses bck to angle brackets.

(a href="www.youtube.com/user/chadtroni…")(img src="yt3.ggpht.com/-Rf9ZOES9WLo/AAA…" title="Chadtronic" width="50" height="50")(/a)

EXAMPLE IN ACTION:

BREAKDOWN:

NOTE: I changed the angle brackets/ inequality signs "<", ">" to parentheses to cause the code to stop working. Now it is inactive and you can see it in the journal but just remember to change the parantheses bck to angle brackets.

NOTE: Remove the ||INSERT YOUR OWN TEXT HERE|| boxes from within the quotation marks and add your own text.

Outtermost wrapping - for adding a link/hyperlink/url (in this case it creates an image with a hyperlink, the image becomes clickable and will open the url)
Add the account url

(a href="||ACCOUNT URL||")(/a)

(/a)(a href="www.youtube.com/user/chadtroni…")(/a)

Inner wrapping - for loading an image asset on the page and making it visible
add the account icon/ avatar/ profile picture/ user image/ etc. (in this case, the dimensions are 50px by 50px, consistent with Devianart account icon dimensions)

NOTE: I have noticed on my profile and this post: Thankyou to my Role Models November 20 2016, that Youtube icons have changed. This means that whenever a Youtube account icon is updated, the url is the same and therefore the embedded icon (on Deviantart) is also updated. It is automitc - youtube user/account icons update automatically and not manually.

(img src="||ICON URL||" width="50" height="50")

(img src="yt3.ggpht.com/-Rf9ZOES9WLo/AAA…" width="50" height="50")

Hovering text/popup/scrollover text - if you were to finish all of the other steps but this, you will notice that when you place/hover your cursor over the icon it will not have a popup text as do all Deviantart account icons. This paramater will add that text.

title="||USERNAME||"

title="Chadtronic"

ONE MORE THING

Note: This step is not nescessary as the user can right click and open the hyperlink/link/url to open in a new tab OR can click on the hyperlink/link/url and have it open in the current tab and can copy and paste it into a new tab OR can click and drag the hyperlink/link/url to a new tab. There are alternatives to this code.

To cause the hyperlink/link/url to open in a new tab add this parameter:
target="||SHORT VERSION OF URL||"
between the href parameter and the closing angle bracket, >. Add the short version of the url.

(a href="www.youtube.com/user/chadtroni…" target="youtube.com/user/chadtronic")(/a)

IN ACTION (Don't click this, (read below), this is just to show that the code works/ is functioning and is active.)

Tabnabbing and phishing: Apparently it is possible for third parties (the owner's of the site that you have linked to) are capable of changing the link of the page you have directed/referred the user to (because of the target parameter), in which case, to saftey proof this and cause the code to open no other page than to the specificed page, add this paramater:
rel="||...||"
between the href and target parameter. Insert "noopener noreferrer".

(a href="www.youtube.com/user/chadtroni…" rel="noopener noreferrer" target="youtube.com/user/chadtronic")(/a)