-
1Prepare 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.
-
2Cut 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"
-
3Upload 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.
-
4See the effect
If we had everything alright, we should see our custom icon next to standard social icon in our site. Here is my effect:
You could also see the icon in my website: www.ntembed.pl :)
Of course you can prepare and add to your websites every custom icon you want. Fell free to use the Hackaday icon which I attach in this instruction.
I hope this instruction will be helpful.
Discussions
Become a Hackaday.io Member
Create an account to leave a comment. Already have an account? Log In.