Last active
May 3, 2019 08:37
-
-
Save bigdigital/9ef64587f38a4f1fd8ad469a171c13b1 to your computer and use it in GitHub Desktop.
Add custom social icon in The7 theme
This file contains hidden or 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 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' ); |
This file contains hidden or 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
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. |
This file contains hidden or 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 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