Build Instructions

Collapse

• 1

  Prepare file

  First step is to create and prepare our logo file in .svg (scalable vector graphic) format. I prepare my file in Inkscape.
  

  You could make your logo in scratch or use some online converters and convert for example .png file into .svg.
  

• 2

  Cut some data from .svg file

  To make our file visible for SSI we must delete some unnecessary data from our file. First we open .svg in notepad++ and search the path fragment - this is our interesting data. Example .svg code is present below:
  

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <path d="M0 0h7.2v2.1h-7.2zM23.9 11.4c-6.7 0-6.7 6.7-6.7 6.7s-.5 6.6 6.7 6.6c0 0 5.9.3 5.9-4.6h-3.1s.1 1.9-2.8 1.9c0 0-3.1.2-3.1-3h9c.2 0 1.1-7.6-5.9-7.6zm-3 5.2s.4-2.7 3.1-2.7 2.6 2.7 2.6 2.7h-5.7zM13.3 14.9s2.6-.2 2.6-3.3C15.9 8.5 13.8 7 11 7H2v17.4h9s5.5.2 5.5-5.1c.1-.1.3-4.4-3.2-4.4zM6 10.1h5s1.2 0 1.2 1.8-.7 2.1-1.5 2.1H6v-3.9zm4.8 11.2H6v-4.6h5s1.8 0 1.8 2.4c.1 2-1.3 2.2-2 2.2z"/>
  </svg>

  We must also add an ID in file header to make file be recognized by SSI. For example:

  id="social-hackaday" 

• 3

  Upload file to server and add some code in Wordpress

  Next step is add file in our site hosting server. We must add file in theme specified folder. Then we search file called functions.php in our WP theme and add in the end some code:
  

  add_filter( 'simple_social_default_profiles', 'biw_add_new_simple_icon' );
  
  function biw_add_new_simple_icon( $icons ) {
  $icons['hackaday'] = [
   'label' => __( 'Hackaday', 'simple-social-icons' ),
   'pattern' => '<li class="social-hackaday"><a href="%s" %s><svg role="img" class="social-hackaday-svg" aria-labelledby="social-hackaday"><title id="social-hackaday">' . __( 'Hackaday', 'simple-social-icons' ) . '</title><use xlink:href="' . esc_url( get_stylesheet_directory_uri(__FILE__) . '/images/icon.svg#social-hackaday' ) . '"></use></svg></a></li>',
   ];
   return $icons;
  }

  Then we should see our new options in widget menu:

  Here we can enter url linked to our icon. In my case it is my Hackaday profile site.

View all 4 instructions