Making Profile field icons clickable

[Manameh]

ok so i made this 'profile field' by going to users and groups, then Users > Profiles > Profile fields > Modify.
once i was done, it was successful.



now my goal is to get that icon to be clickable, so when you click it, it links you to the user's profile of whom you've clicked the icon under. 

this is the url of the icon.
https://i.imgur.com/IgUk4dh.gif

If there is any css/javascript/html, please let me know.
sorry if this is in the wrong section.

thanks.

[Manameh]

BUMP
sorry, iv'e been waiting a long while now....

[SLGray]

Second Reminder:

Please don't double/triple post. Your post need to be separated by 24 hours before bumping, replying or adding more information. Please use the edit button instead!

[Ange Tuteur]

Hello,

You can try doing this :
Administration panel > modules > javascript codes management > create a new script

title : what you wish
placement : in the topics
paste the code below and save :

Code:

$(document).ready(function() {
    $('.postprofile img[src="http://i.imgur.com/IgUk4dh.gif"]').each(function() {
        var t0 = $(this).closest('dl').children('dt').children('a').attr('href');
        $(this).wrap('<a href="'+t0+'"></a>');
    });
});

[Manameh]

sorry for the trouble i have caused.
thank you very much!!
it worked like a charm.

Now what im looking for is a text above it... "Awards:"
tand that's it! thanks

[Ange Tuteur]

Administration panel > users and groups > edit your field

For display type choose : Icon + text and save.

[Manameh]

i know... but it always comes to the left, is there any way to make the text come above the icon?

[Ange Tuteur]

add this to your CSS :
Display > colors > CSS stylesheet

Code:

.postprofile img[src="http://i.imgur.com/IgUk4dh.gif"] { display:block; }

[Manameh]

Solved, thanks very much for your help.

[Jophy]

Solved => Locked