Jump to content

- - - - -

How To Make Social Icons "Portable"

social icons move portable footer sidebar

  • This topic is locked This topic is locked
6 replies to this topic

#1 dawsonbarber†


    Super Member

  • DMS Subscriber†
  • 170 posts

Posted 22 September 2012 - 03:17 PM

Not sure if this is appropriate or not, but I thought it might be useful to some members so I'm sharing it here.

The default social icons that come with the PageLines branding section look and "feel" (on hover) great. The only thing I wasn't crazy about was that I didn't want them in the header. I wanted them in the footer.

So I did a little bit of fiddling around and managed to find a way to make them somewhat portable and, at the same time, retain the nice hover behaviour.

Please Login or Register to see this Hidden Content

Just copy and paste the code above into a footer widget (it also appears to work in sidebar widgets) and you'll have those beautiful social icons - with that great hover effect - in your footer.

Obviously, in the code above, you'll need to replace YOURURL with the actual URL for your site. You'll also need to replace YOURTWITTERID, YOURFACEBOOKPAGEURL, and other social profile links with your own.

If you didn't want to use one of the social icons, then simply select and delete the code for it between the opening <a and closing </a> tags.

Note: you may have to add/modify some CSS in order to make them display exactly how you want them to - e.g. I added the following CSS (to remove the absolute positioning and to center-align the icons inside the footer widget):

Please Login or Register to see this Hidden Content

Depending on the number of icons you use, you'll need to adjust the width accordingly (I'm using six, for which 192px seems to be correct).

Anyway, hope this is useful.
  • mbreese1 likes this

#2 mackenzie



  • Members
  • 333 posts
  • Country: Country Flag

Posted 23 September 2012 - 12:46 PM

Thank you for taking the time to write this out and share :)
  • dawsonbarber likes this

#3 dawsonbarber†


    Super Member

  • DMS Subscriber†
  • 170 posts

Posted 23 September 2012 - 06:23 PM

No worries, Mackenzie.

#4 Jenny†



  • DMS Subscriber†
  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 26 September 2012 - 05:21 PM

The topic was marked as resolved.

#5 pehja†



  • DMS Subscriber†

  • 573 posts
  • LocationSweden
  • Framework Version:Pagelines v2.4.3 and DMS
  • Country: Country Flag

Posted 08 February 2013 - 04:49 PM


#6 jimraffel†



  • DMS Subscriber†

  • 7 posts
  • LocationMIlwaukee (area) WI USA

Posted 22 February 2013 - 03:54 PM

First of all this is great and I have it almost working, but I'm wondering if there is a typo in the code above?


I've installed this at: 

Please Login or Register to see this Hidden Content


You'll notice I'm getting:


icons" style="bottom: 12px; right: 1px;">


displaying before the icons.


I am using this in a universal sidebar installed in the header so maybe that is my problem?


I'm not much of a CSS coder but I also notices only two closing </div> and five opening <div> as well as no closing </section>


Any help would be greatly appreciated!


Thanks again for coming up with this if I can get it to work it's a perfect solution to our current need.


Jim :)

#7 James B†

James B


  • DMS Subscriber†
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 22 February 2013 - 11:55 PM

Hi Jim, I'm assuming you've resolved this as I can no longer see the code appearing on your site before the icons.


Please Login or Register to see this Hidden Content

Also tagged with one or more of these keywords: Resolved, social icons, move, portable, footer, sidebar