Close
0%
0%

Hackaday social media icon

How to add a Hackaday icon to default social media icons on website.

Similar projects worth following
100 views
0 followers
In this short tutorial I show how easy we can add custom social icon on any website. In my example I use Wordpress and Simple Social Icon (SSI) plugin.

Everyday we see many social icons on websites. When we have or website we also want to have that feature. Everything is fine when we want to add generic icons such: facebook, twitter, youtube and so on. But what if we want to have on our site some custom icon, for example Hackaday? In this short tutorial I want to show you how we can create hackaday icon and add it to our site.

hackaday.svg

Hackaday icon in .svg format which will be recognize with SSI plugin.

svg+xml - 3.75 kB - 05/01/2019 at 13:36

Download

  • 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

Enjoy this project?

Share

Discussions

Similar Projects

Does this project spark your interest?

Become a member to follow this project and never miss any updates