Support » Theme: Twenty Seventeen » Add custom Social icon to Twenty Seventeen

  • Hi there

    Apologies if this has already been covered – I’ve searched (at length) but can’t find the answer I’m looking for.

    So, small site build in progress for http://graysgelato.co.uk

    Down in the footer I currently have 3 Social Icons, one an email link, one a Facebook link and the 3rd an external link currently pointing towards the old site.

    What I want to achieve is just to be able to change the “chain link” icon in the external link to a custom one of my choosing which I’ll repoint to an internal link on the new site once I’ve built the page.

    What I was hoping to be able to do, was locate the sprite sheet and replace an existing sprite that I’ll never ever use with my own one. I’m a daily user of Photoshop/Illustrator etc so the editing of the image shouldn’t present an issue. I know it’s a dirty method, but it seemed like the path of least resistance to me! I have a basic grasp of code and the WP structure but much beyond simple CSS changes and I start to lose the plot.

    I guess, before all that, I should ask if there is there a Plugin that would let me achieve this? Or, if not, where can I locate the sprite sheet and, aside from the dirty hack, does my proposed method stand up to logic?!

    Thanks in advance.
    Rob

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    This theme doesn’t use sprites for the logos. It uses SVGs. How important is it to change this link icon? I suspect it’ll take 2 hours to change.

    Thanks Andrew for the swift response.

    Certainly it’s important to the client to change the icon.

    Forgive my miscommunication re sprites/svg’s.

    Does my simplistic plan not hold water then? Are the SVG’s not local to my WordPress installation?

    Surely if they are and I can locate for instance the Instagram icon, and amend it to my new design, the system should then pull in that amended SVG instead of the original Instagram one?

    Alternatively… can I maybe lose the Twenty Seventeen integrated Social Icons altogether and replace with alternate versions from a plugin that would allow customisation?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The SVGs are local to your installation, but the implementation is entirely different from sprites and the idea of replacing an icon doesn’t apply.

    I think the first step would be to create a Child Theme: https://codex.wordpress.org/Child_Themes

    Unless you know of a similar plugin, I would give up all hope on the plugin idea.

    I have been looking for a solution to this problem too, I am working in my child theme but I still can’t figure out how to have my custom SVG icon replace the current ones. It doesn’t have to be a simple solution, I just need a way to do it.

    @oliverquimbywp I found a workaround that allowed me to do what I wanted to do – albeit in a slightly hacky way!

    I installed the Plugin AccessPress Social Icons, which allows you to create sets of various social and other icons. These sets are predefined by the Plugin and the plugin does not allow for custom icons. Don’t panic.

    If you can access your installation via ftp, you can navigate to the plugin folder where the icons are stored and replace one of the icons you’ll never use with one of your own, keeping the original icons name – I think in my case I replaced MySpace and a couple of other essentially defunct social networks. As far as I remember, the icons are PNG’s

    Then, you build your icon set from within the plugin, using whichever icon you’ve replaced. After a little trial and error and a lot of cache emptying/refreshing your new icons should be visible.

    It’s clunky, hacky and dirty I know… but it does work!

    Cheers, Rob

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Add custom Social icon to Twenty Seventeen’ is closed to new replies.