Can I add a LInkedIn Icon?

24 posts from 11 voices

• Started 2 years ago by lainarose
• Latest reply from Ismael
• This topic is not a support question

Tags:

• icon
• not showing

1. 

   lainarose
   Member

   Is there any ways to add a LinkedIn Icon wehre the rss, twitter, and facebook icons are? Or at least a way to switch the picture for the RSS feed to LinkedIn ?

   Posted 2 years ago #
2. 

   thejapanobserver
   Member

   Though I hope Kriesi will answer, I think that since the Contact & Social Stuff tab in the Theme Options admin area only has choices for Twitter and Facebook, it will take a bit of work to include LinkeIn. Perhaps you could change the Facebook icon into a LinkeIn icon by going into the Shared folder in the Images folder in the Broadscope Theme folder on your server. Then in the Theme Options Facebook page account, put your LinkedIn account url. Just an idea.

   Just tired this myself, though, and nothing changed. Oh well. But I am sure there must be a way to do this.

   Posted 2 years ago #
3. 

   Kriesi
   Key Master

   You either can add the html necessary to footer and header.php files (basically just add another list item with a unique class name and apply an icon of choice via css.

   The option would be to just replace the rss icon in your images/skin1 or images/skin2 folder with a new linkedin image and then change the rss url in your template files (again header.php and footer.php) to your linkedin profile.

   Unfortunatley I used a premium icon set that is available here: http://stock.larssonpatrik.com/ and I am not alowed to distribute icons on its own.
   So if you are not that good with photoshop to create a similar linkedin icon yourself, you wil either need to switch to a free icon set like http://icons.enlivenlabs.com/ which is very similar (dont letyourself fool from the purchase button, the set is free if you dont need the psd file)

   Cheers
   Kriesi

   Posted 2 years ago #
4. 

   FergieGirl
   Member

   Hi Kriesi
   I apologise that I didn't see this post before I posted my own question about LinkedIn earlier today (this post is on an earlier page.. well that's my excuse!)
   After some trial and error I managed to sort this out and thought I'd share for those of us who aren't very PHP-minded. I wanted LInkedIn to show in the header rather than the footer.

   I created a LinkedIn button from the existing Facebook button and hard coded it to the appropriate link.
   I used < li class='linkedin' >< a href='http://www.linkedin.com/in/kathiemelocco' >< img src="http://kathiemelocco.net.au/linkedin.png" >< /a>
   It works. (Please note than in the code example above I have added extra spaces so you can actually see the code - else all you'd see is a button that links to my client's profile! :-) )
   Kind regards
   Fergie

   Posted 2 years ago #
5. 

   Dude
   Dude

   Thanks for sharing your knowledge :)

   Posted 2 years ago #
6. 

   lainarose
   Member

   HI FergieGirl, would you mind sharing the icon you created? I am not very good at creating them!

   Posted 2 years ago #
7. 

   lainarose
   Member

   Also the link http://icons.enlivenlabs.com/ does not have a linkedin icon that I saw.

   Once I get the right icon can someone please share the code I put into the header and footer? I am little confused about the instructions. Could you please give me a little more simplistic breakdown for someone who is new to this?

   Thanks for all ya'll help!

   Posted 2 years ago #
8. 

   lainarose
   Member

   here is the current code in head and footer.php

   <li class='rss'>">RSS
   <?php

   I replaced it with this

   <li class='rss'>">RSS
   <?php

   and it didn't seem to work. ..any thoughts on how to fix this?

   Posted 2 years ago #
9. 

   emiliorull
   Member

   I have insert the code as FergieGirl said (i hope done so :-). Now, current code in header.php:

   <ul class="social_bookmarks">
   <li class='linkedin'>< a href='http://es.linkedin.com/in/emiliorull'> < img src="http://kathiemelocco.net.au/linkedin.png" />

   <li class='rss'>">RSS</ a>
   <?php
   if($twitter = avia_get_option('avia, twitter')) echo "<li class='twitter'>Twitter";
   if($facebook = avia_get_option('avia, facebook')) echo "<li class='facebook'>Twitter";
   ?>

   <!-- end social_bookmarks-->

   It seems to work but linkedin icon isn't showing. Nevertheless, the link exists, what could it be wrong?

   Thanks!
   PS: Also added extra spaces in code example above ;-)

   Posted 2 years ago #
10. 

    emiliorull
    Member

    Hi there,
    how can i change facebook icon to linkedin? i wouldn't like to lose RSS icon, as Kriesi says, because I don't use facebook.

    thanks in advance

    Emilio

    Posted 2 years ago #
11. 

    Dude
    Dude

    Can you post a link to your website - I can give you exact instruction then.

    Posted 2 years ago #
12. 

    emiliorull
    Member

    it's still a draft: http://cluster006.ovh.net/~fundacio/
    thanks

    Posted 2 years ago #
13. 

    emiliorull
    Member

    As you can see, i fake the facebook icon in the skin1 folder. ;-) it's not a perfect solution because i will have to repeat in case to update the theme, i suppose.

    Posted 2 years ago #
14. 

    Dude
    Dude

    You can use custom.css to add custom code. To overwrite the facebook link use following code:
    

    .social_bookmarks .facebook a{background: transparent url(../images/skin1/linkedin.png) 0 0  no-repeat;}

    Posted 2 years ago #
15. 

    Mikie_Oz
    Member

    I also added the LinkedIn logo to my site

    Posted 1 year ago #
16. 

    Chris Beard
    

    Hey Mikie_Oz,

    was that a question or a statement?

    Posted 1 year ago #
17. 

    vanwero
    Member

    The code of FergieGirl worked perfect to me, but I have the same problem as emiliorull: Link works, but icon is not showing.
    (But as said... when I hover over "the not showing icon", I can click the link and it works)

    I just replaced the path to my icon (which I uploaded in the media-section in my dashboard) in FergieGirls code, but it's not showing up...

    Code:

    < li class='appstore' >< a href='http://itunes.apple.com/be/app/kbc-assistance/id441462887?mt=8' > < img src="http://www.vitasgroep.be/wp-content/uploads/1321976122_arrows_refresh.png" >< /a>< /li>

    Anyone an idea why?

    Thanks already!!

    Ps: added also spaces to make the code visible to you

    Posted 8 months ago #
18. 

    Ismael
    Moderator

    Hi,

    @vanwero: Can you give us a link to your website?

    'http://www.vitasgroep.be/wp-content/uploads/1321976122_arrows_refresh.png`

    I think there should be a year folder somewhere like this.

    http://www.vitasgroep.be/wp-content/uploads/2012/1321976122_arrows_refresh.png

    Please check the URL of the image.

    Regards.
    Ismael

    Posted 8 months ago #
19. 

    vanwero
    Member

    Hi Ismael,

    It's an existing image-link. I don't know why it's not in a 'year'-folder. It has to do with settings I think?
    If you click this link, you'll see it's an existing 'test'-image: http://www.vitasgroep.be/wp-content/uploads/1321976122_arrows_refresh.png

    You can check the website at: http://www.vitasgroep.be

    If you click on the left of the RSS-icon you can click on a link of the app-store or of Google Play.
    The link works, but as you see, no image appearing.

    Greets,
    Rob.

    Posted 8 months ago #
20. 

    Ismael
    Moderator

    Hi,

    My bad. You need to add this on your custom.css

    .social_bookmarks .appstore a{background: transparent url('http://itunes.apple.com/be/app/kbc-assistance/id441462887?mt=8' > < img src="http://www.vitasgroep.be/wp-content/uploads/1321976122_arrows_refresh.png') 0 0 no-repeat;}

    1321976122_arrows_refresh.png image should be 24x24px.

    Regards,
    Ismael

    Posted 8 months ago #
21. 

    vanwero
    Member

    Hi,

    Couldn't get it working.
    Is it possible this code is not 100% correct?
    => Your code uses a > and < sign without opening/closing it again?

    When I use this in my custom.css, it's not working:
    .social_bookmarks .appstore a{background: transparent url('http://itunes.apple.com/be/app/kbc-assistance/id441462887?mt=8' img src="http://www.vitasgroep.be/wp-content/uploads/1321976122_arrows_refresh.png') 0 0 no-repeat;}

    Possible to correct my code? (And I've removed the code I implemented from the previous post of FergieGirl)

    Regards,
    Vanwero

    Posted 8 months ago #
22. 

    Mya
    

    Hi Vanwero,

    Try this instead:

    .social_bookmarks .appstore a{background: transparent url('http://www.vitasgroep.be/wp-content/uploads/1321976122_arrows_refresh.png') 0 0 no-repeat;}

    Regards,
    Mya

    Posted 8 months ago #
23. 

    vanwero
    Member

    Hi Mya,

    in combination with FergieGirls code it seems to work!!
    (Only my icon is only showing half unless its in the 24x24 format)
    But this wil be a little trial and error...
    Thanks so much for your solution!!

    vanwero

    Posted 8 months ago #
24. 

    Ismael
    Moderator

    Hi vanwero,

    Glad that Mya helped you. :)

    Cheers,
    Ismael

    Posted 8 months ago #

RSS feed for this topic

Reply

You must log in to post.