Simple Social Icons Fontello

Simple Social Icons Fontello

For the Short and Sweet instructions, Click Here. Otherwise, read on.

You’re running a WordPress site and wanted some cool "Follow Me" social icons your users could click on and get social.

So you install the Simple Social Icons plugin (especially if you’ve got a Genesis theme). The plugin is easy-to-use and cool, but…

You soon realize that there’s no options for re-ordering the icons or adding new ones, like Yelp. 🙁

You search online and find links to a few tutorials. Only…They ask you to become a paid member in order to read the tutorial!

This happened to me on a recent site re-design, so after digging around I figured it out and thought I would share. For Free.

Remember: If the plugin is updated, you will have to do this all over again. Unless the developers build in the options in a new release.

Point to remember: The "image" used to link to a site = an icon = a font (think like the font Wingdings) = a Glyph.

The Nine Simple Steps – Detailed Version

Simple Social Icons Plugin Editor

WordPress Plugin editor simple social icons

In the back-end Admin area of your WordPress site, go to Plugins - Editor. Select Simple Social Icons from the drop-down box on the top right and click "Select".

Click on simple-social-icons/simple-social-icons.php.

Open a new tab in your browser and go to www.fontello.com

Open your preferred code editing software. Mine is Dreamweaver. You could also just use Notepad or something similar for this, and use the Edit – Find functions to locate the bits that you will need to work with.

Get your preferred FTP software handy (I use FilezillaIt’s Free :)). If you rely on cPanel, for uploading files, open up a new tab and get it ready.

Write down / type up a complete list of all the sites / icons you will want. Decide what order you want the icons to be in. If you only need to add one site, then there’s no need for this.

Fontello's SERPs for Yelp

Fontello Search – Yelp

Go to the browser tab with www.fontello.com.

Type the name of the first site into the search bar. For example, yelp. The search functionality happens as you type and it will show a list of available icons for this site. In the yelp example, it pulled up two: Font Awesome and Zocial. Pick one and click it.

Look over at the red button on the right, labeled "Download webfont". You should now see it saying (1). This number will increase each time you select one, like a shopping cart.

Go back over to the search box and type in your next one. Click the one you want & Download number goes up. Continue doing this until you have all you need.

If you forget which ones you have selected, click on "Customize Names" and you can see a list. You may have noticed there are many icons available, with only a small percentage being the social website ones.

So if you see one you like (that’s not a website) and select it, make sure you come to the "Customize Names" area, click on the icon’s name after "icon-" and give it a name that you can remember.

You might have to do this anyway on some of them. For example, the name of Flickr’s icon is icon-dot-2, which will probably be hard to remember – even if the icon is actually two dots; so I’d change it to icon-Flickr, but it’s up to you.

Now, once you have all of the ones you want selected, click on "Download webfont (number of icons)".

Save the downloaded zip file somewhere you can easily access it.

Extract the contents to a similarly-accessible location. I tend to use my desktop for temporary use / immediately-available files.

Go to your code editor and open /font/fontello.svg from the folder you downloaded & extracted.

The majority of the code is comprised of <glyph> tags.

There should be one <glyph> tag for every site/icon that you selected and downloaded from fontello.com. But they might not be in the order that you want them in.

Although the order here does not affect the order on your site, it would help to put them in the proper order to make things easier on yourself.

So just take each complete tag, for example:

<glyph glyph-name="youtube" unicode="&#xe800;" d="…numbers, letters, dashes…" horiz-adv-x="857.1" />

and copy and paste them in the order that you want and then save the file but don’t close it.

We will be going back and forth between our the plugin editor in our browser and this file.

Any time you are editing code, be very careful what you select, copy, paste. Moving or deleting any parenthesis, semi-colon, etc. that you don’t need to, will potentially break your site.

Save your work.

Go over to the browser tab with the plugin editor opened to simple-social-icons/simple-social-icons.php.

Luckily, the plugin developers commented their code, so it’s very easy to find what we need to work with.

Scroll down through the page and take a look. PHP comments are usually labels saying "This is what this bit of code below will do" and looks like this:

	  /**
	  * Default widget option values.
	  */

There are three blocks of code that we will be working with, each labelled by a comment above it. If you can’t find what you’re looking for, use the browser’s built-in Edit-Find functionality.

  1. Default widget option values.
    This creates an instance of each of our icons.
  2. Social profile glyphs.
    This assigns each icon name a font number; it’s how our fontello.svg file & this file work together.
  3. Social profile choices.
    This sets up the HTML code (and individual classes for CSS) to display each icon link on the front-end of your site.

We want each of these code blocks & icons to be in the same order as we set up over in fontello.svg.

Let’s look at the first code block, "Default widget option values.".

The first 12 or so lines establish the default CSS values. I wouldn’t suggest messing with these – just use the regular Admin options or CSS to change them. You can if you want, but these values will be the norm defaults.

After that, we start getting into the names of the actual icons.

The one that is listed in my code first is 'bloglovin' => '',. But let’s say I wanted Yelp to be first on my list, as I’ve ordered them in fontello.svg. I would select that line of code and copy. Then put my cursor in front of it and hit enter (re-adjust the spacing) and paste that bit in the new line. And then I’d change the bloglovin text to yelp. Do this for the whole list.

Scroll down to the next code block, "Social profile glyphs." and do the same thing – place the lines of code in the desired order.

Next, we need to edit the values for each icon in this code block. Go back to fontello.svg (you should have been going back & forth between these two anyway, to help you with the order) and look at your first <glyph> tag. Each tag has four attributes, but we are only interested in the first two: glyph-name and unicode.


<glyph glyph-name="bloglovin" unicode="&#xe800;" d="…numbers, letters, dashes…" horiz-adv-x="857.1" />

Grab the unicode value, go back to the plugin-editor screen and paste it into the spot between the single quotes for the relevant glyph. Be sure to include the & (ampersand), # (hash mark) and ; (semi-colon), but not double or single quotes. Do this for the whole list.

Scroll down to the next code block, "Social profile choices." and place the lines of code in the desired order.

Be Careful. An entire section here looks like this:

				'bloglovin' => array(
				'label'   => __( 'Bloglovin URI', 'ssiw' ),
				'pattern' => '<li class="social-bloglovin"><a href="%s" %s>' . $this->glyphs['bloglovin'] . '</a></li>',
			),

Take note of the single quotes and especially the parenthesis + comma at the end.

Use the same process for those custom or newly-created glyphs; grab a block of relevant code, copy & paste it where it belongs in the list. Then change all the name values to be the proper ones, including the li class. There are four places in each block of code where the name should be changed.

If you want to edit the output HTML, go for it. If you’re not familiar with HTML and/or PHP, I’d just leave them alone and only move the code segments and edit the text.

Save the file.

We’re done with the hard part. 🙂 You can close your code editor program after you save your work.

Go to your FTP program or cPanel. Navigate to the plugin folder /wp-content/plugins/simple-social-icons/.

Go to the folder you downloaded and extracted. Move the file config.json into the plugin’s font folder. Yes, you want to replace the one that is currently there with the new one you downloaded.

Don’t worry about the CSS folder.

Move the font folder over to the plugin root folder on your site, replacing the old one.

Close your FTP and code editor programs.

In the Admin area of your site, go to Appearance – Widgets. Drag and Drop the Simple Social Icons widget where you want it. Check it out! There’s your new site inputs and with everything in the right order.

Go to the front end of your site and make sure to flush your browser cache. And then voila! New Simple Social Icons in the order you want, customized the way you want!

The Nine Simple Steps – Short Version

SHORT & SWEET

  1. Go to www.fontello.com
  2. Select icons, Customize the names, Download and Extract
  3. Open /font/fontello.svg in editor & reorder glyph tags
  4. Go to WordPress Admin – Plugins – Editor – Simple Social Icons – simple-social-icons.php. See 3 blocks of relevant code. Reorder & Add/Edit text values.
  5. Replace Unicode values in plugin file with those in the downloaded fontello.svg.
  6. Edit HTML & CSS classes to your liking
  7. Replace config.json in plugin’s font folder with downloaded one (it’s in the root)
  8. Replace font folder with the one you downloaded – ignore CSS folder
  9. Flush browser cache and have fun!
10 replies
  1. Zachary
    Zachary says:

    I tried this with yelp – and I couldn’t get it to display the icon. The button is there – the icon is not. I wonder if there is an issue with the CSS? Maybe there is an issue with the size of icon I saved when I was at fontfolio? Thoughts?

    Reply
    • Zachary
      Zachary says:

      Never mind – I forgot the very last step 🙂 Replace the font folder. Thanks for this post – great information.

      Reply
      • Craig Kiessling
        Craig Kiessling says:

        Glad to hear you worked it out (looked like only a two-minute difference between your comments, so you figured it out quickly. 🙂 I know I was happy to figure it out as well. 🙂

        Reply
  2. Shirin
    Shirin says:

    Thanks for putting this together! I just need to add one glyph.

    I noticed in your example that your glyph unicode was “

    This unicode is reserved for dribble (default settings). I tried to change the unicode to ‘soundcloud’ => ‘&#xe810 but it doesn’t work : (

    Plus, if I were just adding one icon, why would I replace the entire config.json file with the new downloaded one? I thought I would just copy and paste new code to the old file, but that isn’t working either.

    I think I will just add the glyphs from scratch like I think you did in this example and see if that works.

    This glyph issue has been taking so much time to resolve.

    Reply
    • Craig Kiessling
      Craig Kiessling says:

      The codes change for each and every one every time you download them. They would not be the same for you. They would not be the same for me if I downloaded them again. This is why I had to download them all over… You might want to re-read the full blog instead of the short steps. 🙂

      Reply
  3. Christopher Skinner
    Christopher Skinner says:

    Great tutorial Craig, easy to follow although I could not get it working for me. I think this may be related to me having an updated version of the plugin (v 1.0.13)

    I got the widget to give me the option to enter the URI for my new social media service, and could enter the data and dave it, but when it displayed I got the button, but no icon.

    Part of the issue maybe that in my install, there is no config.json, instead there is selection.json. This seems to have a lot of extra information, and allows for reordering etc. I’m new to this, so have no idea how this compares with the old config.json file.

    Also I got a bit confused by these steps…

    – Go to the folder you downloaded and extracted. Move the file config.json into the plugin’s font folder. Yes, you want to replace the one that is currently there with the new one you downloaded.
    – Don’t worry about the CSS folder.
    – Move the font folder over to the plugin root folder on your site, replacing the old one.

    Why would you move config.json to the font folder, and then replace the font folder. When you overwrite the font folder config.json will disappear? It seems strange, perhaps I have read it wrong?

    Any help would be much appreciated!

    Regards,
    Chris

    Reply
  4. Laura R
    Laura R says:

    I followed the instructions and it seems to be working great except that I am getting an ugly unicode square as my icon instead the yelp icon (all I did was add Yelp to the existing icons list). Followed instructions to the “T” but I found the FTP instructions slightly confusing as to what should go where. Any clue on what piece of the puzzle I missed that is giving me this result?

    Reply
  5. Lee Pettijohn
    Lee Pettijohn says:

    Just as a heads up …

    I think SSI changed their font folder file names to ssi-icomoon.___ and selection.json

    This makes a big difference when overwriting the information to the font folder

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.