Jump to content

Customising Social Icons Documentation?

Recommended Posts


Hi there - I am seeking documentation that would help me customise (add my own images) for the social icon buttons.

I have looked around the forum and have seen that there are a few discussions on the topic - but each are very specific to the individuals' needs.

I am more designer than coder and so would appreciate a step by step approach to getting results that I can duplicate.

What I presently know:

Customisations are best completed with the 'Customise plugin' or the 'Base theme' - I am using the later.

The new icon images should be uploaded to the media gallery - or online somewhere with a clear URL.

It is after this things get muddled.

In the post dated 15 Oct 12 - 'Change Social website icons' - I see what I believe to be two methods to change the icon images. However I am not clear which one to use and what the main differences are, or how to go about them fully.

For example is it possible to take the method extracted (from the demo theme site in discussion) as stated by Rob (16 Oct @ 10.43pm) and tweak it for general use? And if so where exactly should I place the code 1) if I am using the plugin and 2) if I am just using the base theme. Will I need to ftp to edit the html or can this be done from within Wordpress.

I apologise if my request is over simplistic - but I promise to share my findings once I succeed. However if there is documentation already available - please point me in the right direction.

Many thanks in advance.

newbie to PG

Share this post

Link to post
Share on other sites
James B

Hi there,

In order to add additional items to icons you'll need to use a hook. The hook data can be added to either the base theme or the customise plugin in the functions.php. Which you decide to use if up to you, both provide the exactly same files to edit. For each method, customise plugin or base theme you'll need to enter the php code into the functions.php and the css into the style.css (or style.less in later editions of the base theme).

An example hook can be found on the link you were looking at 16th Oct, http://www.pagelines.com/forum/topic/22659-change-social-website-icons/

The code on the above link can be taken and altered to match the icons and links you require on your site. You can edit via the wordpress editor in appearance>editor or via Ftp. The process is the same for each.

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post

Link to post
Share on other sites

Much appreciated - will dig in a little further and get it to work.

Share this post

Link to post
Share on other sites

The topic was marked as resolved.

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • MissT
      By MissT+
      The social icons within the Sitemap Footer section plugin are not longer showing on screen. Site details will be sent via email separately.
      WordPress - 4.7.2
      Pagelines Framework Version 5.0.97
      Platform 5 Version - 5.1.6
      Section Sitemap Footer version - 5.0.4.
      All other plugins deactivated.
    • jeomiland
      By jeomiland+
      In post 34871-sharebar-issues Danny suggests one can use any of the icons in font-awsome for social share icons. What's the best way to use other images?  Client asked me to implement the icons at http://www.wpbeginner.com/showcase/16-best-free-social-media-icon-sets-for-wordpress/  specifically #20 "20 Social Media Icons". Have downloaded the zip file containing those icons but where/how get them to show up on the site?
      So I am referring to both the icons to send visitors to the site owner social properties AND shar icons so people can Like, share ect.
      Upon further research, I see a discussion on problems with using social icons on SSL (https://...) sites since a warning message comes up complaining about mixed SSL and non-SSL content on the page? Since this site is a shoppingcart site, using Woocommerce, this could be a problem. What's the current wisdom on dealing with this?  Also, I read a while ago there can be a performance hit if one makes their whole site SSL, so since Wordpress and themes adds significant overhead, what's the current wisdom on this issue?  SSL for all pages or just for shoppingcart checkout/account info pages?
      site: http://verdanthomeproducts.com
    • pieterbartlema
      By pieterbartlema
      Dear All,
      Somehow the the social icons went missing in the site branding section. please help...
    • abuzzelli
      By abuzzelli+
      Trying to display social icons in the footer of http://brkichdesign.com/NewSite/. All are working but yelp. It's right after the pinterest icon, it's there but not showing up. Any ideas why?
    • lutz
      By lutz
      I'm using Pagelines for some years now and had to change to responsive webdesign recently (Site Options - Layout Editor - Layout Handling: "responsive with % width" now instead of the former "static with pixel width").
      In "Site Options - Header and Footer" - Branding Section: Social Icon Position" I set the distance from bottom to 35 and the distance from right to 1135 as it always has been.
      Now the problem is that the social icons move with the width of the browser (IE, Chrome, Opera, Firefox: all the same) and thus out of the window if the frame is too small. Please try out on http://mobiwatch.de
      I can't position social icons on the right side of the website because there are two sidebars with ads.
      And I can't change back to static pixel width design because of Google: they will ignore websites that do not have responsive web design!
      So I really, really hope you can help me fix that!!!
      Thanks in advance,