Last active
June 15, 2017 16:39
-
-
Save bigdigital/dd1595cffd39a7a7b23d5ba7c3f91bcd to your computer and use it in GitHub Desktop.
Add custom social icon in The7 theme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//add this code to main or child functions.php file | |
function presscore_get_social_icons_data() { | |
return array( | |
'facebook' => __('Facebook', 'the7mk2'), | |
'twitter' => __('Twitter', 'the7mk2'), | |
'google' => __('Google+', 'the7mk2'), | |
'dribbble' => __('Dribbble', 'the7mk2'), | |
'you-tube' => __('YouTube', 'the7mk2'), | |
'rss' => __('Rss', 'the7mk2'), | |
'delicious' => __('Delicious', 'the7mk2'), | |
'flickr' => __('Flickr', 'the7mk2'), | |
'forrst' => __('Forrst', 'the7mk2'), | |
'lastfm' => __('Lastfm', 'the7mk2'), | |
'linkedin' => __('Linkedin', 'the7mk2'), | |
'vimeo' => __('Vimeo', 'the7mk2'), | |
'tumbler' => __('Tumblr', 'the7mk2'), | |
'pinterest' => __('Pinterest', 'the7mk2'), | |
'devian' => __('Deviantart', 'the7mk2'), | |
'skype' => __('Skype', 'the7mk2'), | |
'github' => __('Github', 'the7mk2'), | |
'instagram' => __('Instagram', 'the7mk2'), | |
'stumbleupon' => __('Stumbleupon', 'the7mk2'), | |
'behance' => __('Behance', 'the7mk2'), | |
'mail' => __('Mail', 'the7mk2'), | |
'website' => __('Website', 'the7mk2'), | |
'px-500' => __('500px', 'the7mk2'), | |
'tripedvisor' => __('TripAdvisor', 'the7mk2'), | |
'vk' => __('VK', 'the7mk2'), | |
'foursquare' => __('Foursquare', 'the7mk2'), | |
'xing' => __('XING', 'the7mk2'), | |
'weibo' => __('Weibo', 'the7mk2'), | |
'odnoklassniki' => __('Odnoklassniki', 'the7mk2'), | |
'research-gate' => __('ResearchGate', 'the7mk2'), | |
'yelp' => __('Yelp', 'the7mk2'), | |
'blogger' => __('Blogger', 'the7mk2'), | |
'soundcloud' => __('SoundCloud', 'the7mk2'), | |
//ADD HERE CUSTOM ICONS NAME | |
'bloglovin' => __('Bloglovin\'', 'the7mk2'), | |
'snapchat' => __('Snapchat \'', 'the7mk2'), | |
); | |
} | |
function add_this_script_to_footer(){ ?> | |
<script> | |
jQuery(document).ready(function() { | |
var myicons = [ | |
//HERE IS CUSTOM SVG | |
'<g id="bloglovin" transform="matrix(0.04946997,0,0,0.04946997,6.7344335,6.5441163)"><path d="M147.7,111.4c21.7-4.5,39.7-24.1,39.7-52.8C187.4,27.9,165,0,121.2,0H0v230h125c44.2,0,67-27.6,67-62.4 C191.9,139,172.6,115.2,147.7,111.4z M49,43.1h61.4c16.6,0,26.9,10,26.9,24.1c0,14.8-10.4,24.1-26.9,24.1H49V43.1z M112.5,186.9 H49v-52.4h63.5c19,0,29.3,11.7,29.3,26.2C141.9,177.2,130.8,186.9,112.5,186.9z M252.3,0.4c-14.8,0-27.3,12.4-27.3,27.2 c0,14.8,10.4,24.8,23.5,24.8c2.8,0,5.5-0.3,6.6-1c-2.8,12.4-15.5,26.9-26.6,32.8l19,15.5C268.8,84.6,283,61.5,283,35.6 C283,13.2,268.5,0.4,252.3,0.4z"/></g>', | |
'<g id="snapchat" transform="matrix(0.04946997,0,0,0.04946997,6.7344335,6.5441163)"><path d="M147.7,111.4c21.7-4.5,39.7-24.1,39.7-52.8C187.4,27.9,165,0,121.2,0H0v230h125c44.2,0,67-27.6,67-62.4 C191.9,139,172.6,115.2,147.7,111.4z M49,43.1h61.4c16.6,0,26.9,10,26.9,24.1c0,14.8-10.4,24.1-26.9,24.1H49V43.1z M112.5,186.9 H49v-52.4h63.5c19,0,29.3,11.7,29.3,26.2C141.9,177.2,130.8,186.9,112.5,186.9z M252.3,0.4c-14.8,0-27.3,12.4-27.3,27.2 c0,14.8,10.4,24.8,23.5,24.8c2.8,0,5.5-0.3,6.6-1c-2.8,12.4-15.5,26.9-26.6,32.8l19,15.5C268.8,84.6,283,61.5,283,35.6 C283,13.2,268.5,0.4,252.3,0.4z"/></g>' | |
]; | |
var myicons = jQuery('<svg id="my-svg-source" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" style="position:absolute; margin-left: -100%" xmlns:xlink="http://www.w3.org/1999/xlink">'+myicons+'</svg>'); | |
jQuery(document.body).prepend(jQuery(myicons)); | |
jQuery(".soc-ico .bloglovin").find("svg use").attr("xlink:href", "#bloglovin"); | |
jQuery(".soc-ico .snapchat").find("svg use").attr("xlink:href", "#snapchat"); | |
}); | |
</script> | |
<?php } | |
add_action('wp_footer', 'add_this_script_to_footer', 100); ?> |
How do you find out what a matrix is for a Font-Awesome SVG? I can find the path to the SVG but not the matrix. Any information you have, I'd greatly appreciate. Thanks!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
both the bloglovin and snapchat showing the bloglovin logo .... please check the matrix, I found both the values are equal.
Thanks.