Skip to content

Instantly share code, notes, and snippets.

@bigdigital
Last active June 15, 2017 16:39
Show Gist options
  • Save bigdigital/dd1595cffd39a7a7b23d5ba7c3f91bcd to your computer and use it in GitHub Desktop.
Save bigdigital/dd1595cffd39a7a7b23d5ba7c3f91bcd to your computer and use it in GitHub Desktop.
Add custom social icon in The7 theme
//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); ?>
@hirogrrl
Copy link

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