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.<\/p>\n

$\"\"$ <\/a><\/p>\n

Fig. 1. Import config file.<\/p>\n<\/div>\n

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<\/p>\n

$\"\"$ <\/a><\/p>\n

Fig. 2. Glyph options.<\/p>\n<\/div>\n

After you finish, download webfont and unpack it.
Copy \u201cfont\u201d<\/strong> folder that persist into the archive to the root dir of your child theme.
Open css\/my-social-icon-codes.css file from the downloaded archive, that should looks like this:<\/p>\n

$\"\"$ <\/a><\/p>\n
Fig. 3. Social CSS rules before<\/p>\n<\/div>\n
You need to modificate CSS rules to be like this\u00a0 \".icon_name .soc-font-icon: { content: 'eXXX'; }\"<\/code> where XXX icon code.<\/p>\n
In result, the CSS will looks like this<\/p>\n
<\/a><\/p>\nFig. 4. Social CSS rules after modification<\/p>\n<\/div>\n How to prepare SVG<\/strong><\/p>\nYou can prepare SVG by using online SVG editor http:\/\/editor.method.ac<\/a> Open SVG, set image size 16\u00d716<\/p>\n <\/a><\/p>\nFig. 5. Set icon size.<\/p>\n<\/div>\n then scale image as you want. You can alight image to center by using alich buttons<\/p>\n<\/a><\/p>\nFig. 6. Align icon.<\/p>\n<\/div>\nSave SVG file and drag&drop to fontello.com<\/a> service.<\/p>\n Now we need to add newly created icons to the theme social widget selector, for this we should add following code to the child theme\u00a0functions.php<\/strong><\/p>\n Edit functions.php<\/strong><\/p>\n \/\/add this to child function.php filefunction 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' );<\/pre>\nFinally, need to add custom CSS to the\u00a0style.css of the child theme<\/p>\n Edit CSS<\/strong><\/p>\n \/*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 that we created on Fig. 4*\/.bloglovin .soc-font-icon:before { content: 'e801'; }.weixin .soc-font-icon:before { content: 'e802'; }.snapchat .soc-font-icon:before { content: 'e803'; }<\/pre>\n","protected":false},"excerpt":{"rendered":"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…<\/p>\n","protected":false},"author":2,"featured_media":4480,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[30,31],"tags":[],"class_list":["post-4097","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dream-theme-support-portal","category-knowledgebase","category-30","category-31","description-off"],"acf":[],"_links":{"self":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/4097","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/comments?post=4097"}],"version-history":[{"count":2,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/4097\/revisions"}],"predecessor-version":[{"id":4599,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/4097\/revisions\/4599"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media\/4480"}],"wp:attachment":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media?parent=4097"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/categories?post=4097"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/tags?post=4097"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}