• Skip to main content

Victor Font Consulting Group, LLC

The DEX Intranet Specialists

Call Us:

+1 919-604-5828

  • Home
  • Care Plans
    • Care Articles
    • Optional Subscriptions
  • Consultations
  • Products
    • Code Snippets
    • Public GitHub Repositories
    • Gist Snippets
    • Pastebin Snippets (Free)
    • Free Plugins
  • FAQs
  • Support
    • Graphic Design
  • Contact
    • Speakers
    • Portfolio
  • Resources
    • Free WordPress Video Training
    • Tutorials
    • Articles
    • Cybersecurity
    • EU Referral Network
You are here: Home / Code Snippet / Add Snapchat to Simple Social Icons

Add Snapchat to Simple Social Icons

By Victor M. Font Jr.
May 20, 20167 Comments

Authors Note: The code in this article only works for Simple Social Icons Versions prior to the 2.0 release in December 2016. The 2.0 version switched from using icon fonts to using SVG graphics for the icons. The code below has been deprecated. See this post for further details: Simple Social Icons Ver. 2.0
Snapchat icon, public domain image from pixabay.com

Many users like to use the Simple Social Icons plugin with their Genesis Framework based child themes. Authored by Nathan Rice, Brian Gardner and the Studio Press team, it works very well with Genesis. After all, they are the framework's authors. And in keeping with the Genesis philosophy for making everything fairly simple to modify if you know how, the Simple Social Icons plugin makes use of filters to allow a developer to easily modify its content and display. A common request these days is to add the Snapchat icon to Simple Social Icons. This article shows you how to do that.

First, we need to add Snapchat to the plugin's profile and glyphs definitions. Add this to your child theme's functions.php:

Unfortunately the font icon set included with Simple Social Icons does not include the Snapchat ghost. For the purpose of this article, I've used FontAwesome for the glpyh. If you have a different preference, you can use any icon font you'd like, but you're on your own for figuring out the code. I've found that one of the best ways to include FontAwesome on your site is to install the Better Font Awesome plugin.

Finally, add this to you child theme's style.css:

This code was tested in my local environment with the Executive Pro theme.

  • 6shares
  • Facebook0
  • Twitter1
  • Pinterest2
  • LinkedIn2
  • Print
  • SMS1

About Victor M. Font Jr.

Victor M. Font Jr. is an award winning author, entrepreneur, and Senior IT Executive. A Founding Board Member of the North Carolina Executive Roundtable, he has served on the Board of Advisors, of the North Carolina Technology Association, the International Institute of Business Analysis, Association of Information Technology Professionals, Toastmasters International, and the North Carolina Commission for Mental Health, Developmental Disabilities, and Substance Abuse Services. He is author of several books including The Ultimate Guide to the SDLC and Winning With WordPress Basics, and Cybersecurity.

Reader Interactions

VictorFont.com runs on the Genesis Framework

Genesis FrameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple—start using Genesis now!

Click here to download The Genesis Guide for Absolute Beginners (PDF - 1.4 MB)

Leave a Reply Cancel reply

Your email address and website will not be published. Required fields are marked *
Posting a comment means that you agree with and accept our Comment & Product Review Policy

Comments

  1. Tony Leary

    November 22, 2016 at 4:44 pm

    Thanks for this, I used it for Houzz (‘’ for anyone else trying to do the same)

    Any suggestions on how I could add the sameAs schema markup, as depicted on this site?

    https://www.searchenginenews.com/sample/update/entry/how-to-add-your-social-profiles-to-the-knowledge-panel

    Reply
    • Victor M. Font Jr.

      November 24, 2016 at 11:01 am

      The link that you pointed us to that provides the examples is using JSon to declare the social profile links. If you are using the Genesis Framework, simply add the script block to header scripts through Genesis/Settings/Header scripts. You could also use the Genesis Simple Hooks, or add the code through functions.php by adding an action for the Genesis meta hook.

      Reply
  2. Grant Austin

    November 2, 2016 at 5:38 am

    Love this tutorial.

    What I am struggling to figure out is why the CSS is slightly off. Noticed, I used this for Soundcloud and Mixcloud (as seen in the middle), but the CSS is slightly off for those two.

    http://i.imgur.com/Wu1t6WJ.png

    I was wondering if you had this issue and managed to fix it?

    Reply
    • Victor M. Font Jr.

      November 3, 2016 at 10:20 am

      Hi Grant,

      Can’t say that I’ve run into this problem. If you post a link to your site, I’m happy to take a look.

      Reply
  3. Kate Scott

    October 6, 2016 at 9:38 am

    I’m working on a demo site and I modified this code to add a book icon (to represent Goodreads). It worked great except for one thing: The icon’s unicode shows up next to the icon itself in Firefox. I know there have been problems with Font Awesome rendering incorrectly in Firefox and I’ve tried every fix I could find on StackExchange, but nothing has worked. Any ideas on what’s going on?

    Reply
    • Victor M. Font Jr.

      October 6, 2016 at 9:58 am

      Hi Kate,

      Firefox has no problems rendering Fontawesome icons. You didn’t follow the directions in the article. You have the wrong class on the list item you created. Please go back over the article and follow directions for creating the class and li item.

      Reply
      • Kate Scott

        October 6, 2016 at 2:33 pm

        Oh, I see. Thanks!

        Reply

Call: +1 919-604-5828

Send us an E-mail

Accessibility Statement | Affiliate Marketing Disclosure | Capability Statement

Cookie Policy | Comment & Product Review Policy | Privacy Policy | Site Map | Terms & Conditions

Copyright © 2003–2023 Victor M. Font Jr.

Return to top of page