Skip to content

Instantly share code, notes, and snippets.

@bigdigital
Last active May 3, 2019 08:37
Show Gist options
  • Save bigdigital/9ef64587f38a4f1fd8ad469a171c13b1 to your computer and use it in GitHub Desktop.
Save bigdigital/9ef64587f38a4f1fd8ad469a171c13b1 to your computer and use it in GitHub Desktop.
Add custom social icon in The7 theme
//add this to child function.php file
function my_presscore_get_social_icons_data($icons) {
//ADD HERE CUSTOM ICONS NAMES
$icons['bloglovin'] = __('Bloglovin\'', 'the7mk2');
$icons['weixin'] = __('Weixin\'', 'the7mk2');
$icons['snapchat'] = __('Snapchat\'', 'the7mk2');
return $icons;
}
add_filter( 'presscore_get_social_icons_data', 'my_presscore_get_social_icons_data' );
Starting from 5.4.x The7 theme update, there was changed icon format from SVG to font. If you want to add custom social icons to the theme, you should prepare font and paste this font to child theme, then add PHP and CSS code with required modificaton to function.php and style.css child theme files.
To prepare font, you can use fontello.com online service, just import https://www.screencast.com/t/Hgna4hqD predefined configuration file https://www.dropbox.com/s/lbtgzmaqqxis78r/config.json?dl=0
Upload own SVG file or choose icon from fontello library, then edit glyph, configure glyph name to the name that you use into PHP array https://www.screencast.com/t/GP8fSVtDZ
After you finish, download webfont and unpack it.
Copy font folder that persist into archive to the root dir of your child theme.
Open css/my-social-icon-codes.css and create css rules witn icon codes like this ".icon_name .soc-font-icon: { content: '\eXXX'; }" where XXX icon code.
How to prepare SVG
You can prepare SVG by using online SVG editor http://editor.method.ac
Open SVG, set image size 16x16 https://www.screencast.com/t/PzeUiLiu1k1 , then scale image as you want. You can alight image to center by using alich buttons https://www.screencast.com/t/5Sr9dF8oOI
Save SVG file and drag&drop to fontello.com service.
/*add this to style.css of the child theme*/
@font-face {
font-family: 'my-social-icon';
src: url('font/my-social-icon.eot?36222938');
src: url('font/my-social-icon.eot?36222938#iefix') format('embedded-opentype'),
url('font/my-social-icon.woff2?36222938') format('woff2'),
url('font/my-social-icon.woff?36222938') format('woff'),
url('font/my-social-icon.ttf?36222938') format('truetype'),
url('font/my-social-icon.svg?36222938#my-social-icon') format('svg');
font-weight: normal;
font-style: normal;
}
/*add required icon classes here*/
.bloglovin [class^="soc-font-"], .bloglovin [class*="soc-font-"],
.weixin [class^="soc-font-"], .weixin [class*="soc-font-"],
.snapchat [class^="soc-font-"], .snapchat [class*="soc-font-"]
{
/* use !important to prevent issues with browser extensions that change fonts */
font-family: "my-social-icon" !important;
}
/*add icon classes and codes here*/
.bloglovin .soc-font-icon:before { content: '\e801'; }
.weixin .soc-font-icon:before { content: '\e802'; }
.snapchat .soc-font-icon:before { content: '\e803'; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment