{"id":2174,"date":"2021-06-08T18:01:59","date_gmt":"2021-06-08T18:01:59","guid":{"rendered":"http:\/\/localhost:10003\/socialmediaicon-generator-style-1-copy\/"},"modified":"2021-06-09T14:43:04","modified_gmt":"2021-06-09T18:43:04","slug":"socialmediaicon-style2","status":"publish","type":"post","link":"https:\/\/thewpgeek.com\/socialmediaicon-style2\/","title":{"rendered":"Social Media Icon Generator (Style 2)"},"content":{"rendered":"\n<p>This has good browser support (check developer notes <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@keyframes\">keyframes <\/a>and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/text-shadow\">text-shadow<\/a>). This effect applies a shining effect as the user hovers over the icon. This effect works best with the right colors, so do some experimenting!<\/p>\n\n\n\n<style>\n.caption {\n    display: none;\n}\n<\/style>\n\n\n\n<style>\n.chkBox{\n    font-family: 'Font Awesome 5 Free';\n\t  font-size:1.5rem;\n    cursor:pointer;\n} \n#chk1,\n#chk2,\n#chk3,\n#chk4,\n#chk5,\n#chk6,\n#chk7,\n#chk8{\n    display:none;\n}\n .chkBox input[type='checkbox']+ label:before {\n    content: \"\\f14a\";\n }\n .chkBox  input[type='checkbox']:checked + label:before {\n  content: \"\\f0c8\";\n}\n.wrapper{\npadding:10px;\n}\n\n#textContentOutput{\n  white-space: pre-wrap;\n}\n\n.fab {\n\tcolor: rgb(0, 0, 0);\n}\n.social:hover {\n  -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);\n  -webkit-mask-size: 200%;\n  animation: shine 2s infinite; \n}\n\n@-webkit-keyframes shine {\n  from {\n    -webkit-mask-position: 150%;\n  }\n  \n  to {\n    -webkit-mask-position: -50%;\n  }\n}\n\n<\/style>\n\n\n\n<div class=\"wp-block-group has-theme-white-background-color has-background\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:20%\">\n<p><strong>Icon Size<\/strong><\/p>\n\n\n\n<div class=\"sizebox\">\n  <select id=\"sizeSelect\" onchange=\"sizeChange()\">\n    <option>Standard <\/option>\n    <option>2x<\/option>\n    <option>3x<\/option>\n    <option>5x<\/option>\n    <option>6x<\/option>\n  <\/select>\n<\/div>\n\n\n\n<p><strong>Icon Type<\/strong><\/p>\n\n\n\n<div class=\"sizebox\">\n  <select id=\"typeSelect\" onchange=\"typeChange()\">\n    <option>Square <\/option>\n    <option>Standard<\/option>\n   <\/select>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Networks to Include<\/strong><\/p>\n\n\n\n<div class=\"chkBox\">\n <input type=\"checkbox\" id=\"chk1\" name=\"facebook\">\n<label for=\"chk1\"> FaceBook<\/label>\n <input type=\"checkbox\" id=\"chk2\" name=\"twitter\">\n<label for=\"chk2\"> Twitter<\/label>\n <input type=\"checkbox\" id=\"chk3\" name=\"pinterest\">\n<label for=\"chk3\"> Pinterest<\/label>\n <input type=\"checkbox\" id=\"chk4\" name=\"youtube\">\n<label for=\"chk4\"> YouTube<\/label><br>   \n <input type=\"checkbox\" id=\"chk5\" name=\"instagram\">\n<label for=\"chk5\"> Instagram<\/label>  \n <input type=\"checkbox\" id=\"chk7\" name=\"tumblr\">\n<label for=\"chk7\"> Tumblr<\/label>  \n <input type=\"checkbox\" id=\"chk8\" name=\"whatsapp\">\n<label for=\"chk8\"> Whatsapp <\/label>  \n<\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-group has-theme-white-background-color has-background\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Choose a Background Color<\/strong><\/p>\n\n\n\n<div>\n  Pick a color <input onchange=\"colorSelected(this)\" type=\"color\" defaultvalue=\"#FFF\">\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Choose Icon Color<\/strong><\/p>\n\n\n\n<div>\n  Pick a color <input onchange=\"colorSelectedIcon(this)\" type=\"color\" id=\"color1\">\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-group has-custom-sun-background-color has-background\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h4 class=\"wp-block-heading\">Your Icons :<\/h4>\n\n\n\n<div class=\"wrapper\" id=\"source\">\n<i class=\"fab fa-facebook-square social facebook\"><\/i>\n<i class=\"fab fa-twitter-square  social twitter\"><\/i>\n<i class=\"fab fa-pinterest-square social pinterest\"><\/i>\n<i class=\"fab fa-youtube-square social youtube\"><\/i>\n<i class=\"fab fa-instagram-square social instagram\"><\/i>\n<i class=\"fab fa-tumblr-square  social tumblr\"><\/i>\n<i class=\"fab fa-whatsapp-square social whatsapp\"><\/i>\n<\/div>\n<\/div><\/div>\n\n\n\n<script>\n\nfunction update(){\n \n  sizeChange()\n  let element = document.getElementById(\"color1\");\n  colorSelectedIcon(element);\n}\n\nfunction networkfunc(e) {\nlet networkName = e.target.name;\n  \nlet targetElement = document.querySelector(\".\" + networkName);\n  \n   if (e.target.tagName == 'INPUT'){\n \nif (!targetElement){\n\n  \nif(networkName == \"facebook\"){\nlet btn = document.createElement(\"I\");   \nlet targetDiv = document.querySelector(\".wrapper\");\n btn.className = 'fab fa-facebook-square social facebook';\n  targetDiv.appendChild(btn); \n}\nif(networkName == \"instagram\"){\nlet btn = document.createElement(\"I\");   \nlet targetDiv = document.querySelector(\".wrapper\");\n btn.className = 'fab fa-instagram-square social instagram';\n  targetDiv.appendChild(btn); \n}\nif(networkName == \"tumblr\"){\nlet btn = document.createElement(\"I\");   \nlet targetDiv = document.querySelector(\".wrapper\");\n btn.className = 'fab fa-tumblr-square social tumblr';\n  targetDiv.appendChild(btn); \n}\n  if(networkName == \"whatsapp\"){\nlet btn = document.createElement(\"I\");   \nlet targetDiv = document.querySelector(\".wrapper\");\n btn.className = 'fab fa-whatsapp-square social whatsapp';\n  targetDiv.appendChild(btn); \n}\n  if(networkName == \"twitter\"){\nlet btn = document.createElement(\"I\");   \nlet targetDiv = document.querySelector(\".wrapper\");\n btn.className = 'fab fa-twitter-square social twitter';\n  targetDiv.appendChild(btn); \n}\n  \n   if(networkName == \"pinterest\"){\nlet btn = document.createElement(\"I\");   \nlet targetDiv = document.querySelector(\".wrapper\");\n btn.className = 'fab fa-pinterest-square social pinterest';\n  targetDiv.appendChild(btn); \n}\n  \n     if(networkName == \"youtube\"){\nlet btn = document.createElement(\"I\");   \nlet targetDiv = document.querySelector(\".wrapper\");\n btn.className = 'fab fa-youtube-square  social youtube';     \n  targetDiv.appendChild(btn); \n}\n  \nupdate();    \n  \n}  else {\n \/\/ it exists, lets remove it\n  targetElement.remove();\n  update();  \n}\n\n    }\n  \n}\n  \ndocument.querySelector(\".chkBox\").addEventListener('click', networkfunc);\n\n\/\/ \nfunction removeClass(size){\n  let elements = document.getElementsByClassName(size); \n\nwhile(elements.length > 0){\n    elements[0].classList.remove(size);\n} \n} \n\n\nfunction sizeChange(){\nremoveClass(\"fa-2x\");\nremoveClass(\"fa-3x\");\nremoveClass(\"fa-4x\");\nremoveClass(\"fa-5x\");\nremoveClass(\"fa-6x\");\n  let sizeclass = document.getElementsByClassName('fab');\n  \/\/ size code. \nlet size = document.getElementById(\"sizeSelect\").value;\n \nfor (let i=0; i < sizeclass.length; i++){\n  console.log(size);\n sizeclass[i].classList.add(\"fa-\"+size);\n}\n  \n}\n\n\nfunction colorSelected (element) {\n let colElement= document.querySelector(\".wrapper\").style.background= element.value;\n  \n}\n\nfunction colorSelectedIcon (element) {\n\n  let ele = document.getElementsByClassName('fab');\nfor (var i = 0; i < ele.length; i++ ) {\n    ele[i].style.color = element.value;\n}\n  \n}\n\nfunction typeChange(){\n\/\/ first lets get the icon styles\nlet userStyle = document.querySelector(\".wrapper\");\nlet classes = \"\"; \/\/userStyle.firstElementChild.className.split(' ');\nlet num = document.querySelector(\".wrapper\").childElementCount;\n\nfor (let i=0; i < num; i++){\nclasses += userStyle.children[i].className.split(' ');\nclasses += \",\";\n}\n\nlet networks = [];\nif (classes.includes(\"facebook\")){\nnetworks.push(\"facebook\");\n}\nif (classes.includes(\"pinterest\")){\nnetworks.push(\"pinterest\");\n}\nif (classes.includes(\"twitter\")){\nnetworks.push(\"twitter\");\n}\nif (classes.includes(\"youtube\")){\nnetworks.push(\"youtube\");\n}\nif (classes.includes(\"instagram\")){\nnetworks.push(\"instagram\");\n}\nif (classes.includes(\"tumblr\")){\nnetworks.push(\"tumblr\");\n}\nif (classes.includes(\"whatsapp\")){\nnetworks.push(\"whatsapp\");\n}\n\nfor(let i=0; i < networks.length; i++){\nremoveClass(\"fa-\"+networks[i]+\"-square\");\nremoveClass(\"fa-\"+networks[i]+\"\");\n}\n\/\/ now add correct class back\n\nlet typeclass = document.getElementsByClassName('fab');\nlet type = document.getElementById(\"typeSelect\").value;\n \nif (type ==\"Square\"){\nfor (let i=0; i < typeclass.length; i++){\ntypeclass[i].classList.add(\"fa-\"+networks[i]+\"-square\");\n}\n}\nif (type ==\"Standard\"){\nfor (let i=0; i < typeclass.length; i++){\ntypeclass[i].classList.add(\"fa-\"+networks[i]);\n}\n}\n  \n}\n\n\n\n\n<\/script>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-100\" id=\"button_to_load_data\"><a class=\"wp-block-button__link has-theme-white-color has-custom-daylight-background-color has-text-color has-background\" style=\"border-radius:19px\">Generate My Code!<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<div id=\"receiving_div_id\">\n   <p>Just like magic your code will appear here. Click the button above.  <\/p> \n<\/div>\n\n<script type=\"text\/javascript\">\n   jQuery(\"#button_to_load_data\").click(function() {\n\n\/\/ first lets get the icon styles\nlet userStyle = document.querySelector(\".wrapper\");\nlet classes = \"\"; \/\/userStyle.firstElementChild.className.split(' ');\nlet num = document.querySelector(\".wrapper\").childElementCount;\n\nfor (let i=0; i < num; i++){\nclasses += userStyle.children[i].className.split(' ');\nclasses += \",\";\n}\n\nlet networks =\"\";\nif (classes.includes(\"facebook\")){\nnetworks += \"facebook\" + \",\";\n}\nif (classes.includes(\"pinterest\")){\nnetworks += \"pinterest\" +\",\";\n}\nif (classes.includes(\"twitter\")){\nnetworks += \"twitter\" +\",\";\n}\nif (classes.includes(\"instagram\")){\nnetworks += \"instagram\" +\",\";\n}\nif (classes.includes(\"tumblr\")){\nnetworks += \"tumblr\" +\",\";\n}\nif (classes.includes(\"whatsapp\")){\nnetworks += \"whatsapp\" +\",\";\n}\nif (classes.includes(\"youtube\")){\nnetworks += \"youtube\" +\",\";\n}\nlet size =\"\";\nif (classes.includes(\"fa-2x\")){\nsize += \"fa-2x\";\n}\nif (classes.includes(\"fa-3x\")){\nsize += \"fa-3x\";\n}\nif (classes.includes(\"fa-4x\")){\nsize += \"fa-4x\";\n}\nif (classes.includes(\"fa-5x\")){\nsize += \"fa-5x\";\n}\nif (classes.includes(\"fa-6x\")){\nsize += \"fa-6x\";\n}\n\nlet elem = userStyle.firstElementChild;\nlet iconColor = window.getComputedStyle(elem, null).getPropertyValue(\"color\");\nlet backColor = window.getComputedStyle(userStyle, null).getPropertyValue(\"background-color\");\nlet type = document.getElementById(\"typeSelect\").value;\n\n      var data = {\n         'action'   : 't4a_ajax_call', \/\/ the name of your PHP function!\n         'function' : 'show_files',    \/\/ a random value we'd like to pass\n         'fileid'   : '7',              \/\/ another random value we'd like to pass\n         'classList'    : classes,\n         'iconcolor'  : iconColor,\n         'backgroundColor'  : backColor,\n         'networks'  : networks,\n         'size'  : size,\n         'style'  : \"style2\",\n         'type' :type,\n         };\n       \n      jQuery.post(ajaxurl, data, function(response) {\n         jQuery(\"#receiving_div_id\").html(response);\n      });\n   });\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This has good browser support (check developer notes keyframes and text-shadow). This effect applies a shining effect as the user hovers over the icon. This effect works best with the right colors, so do some experimenting! Icon Size Standard 2x3x5x6x Icon Type Square Standard Networks to Include FaceBook Twitter Pinterest YouTube Instagram Tumblr Whatsapp Choose [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":2328,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_uag_custom_page_level_css":"","footnotes":""},"categories":[4],"tags":[],"uagb_featured_image_src":{"full":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/style2socialicons-copy.jpg",1542,769,false],"thumbnail":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/style2socialicons-copy-150x150.jpg",150,150,true],"medium":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/style2socialicons-copy-300x150.jpg",300,150,true],"medium_large":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/style2socialicons-copy-768x383.jpg",768,383,true],"large":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/style2socialicons-copy-1024x511.jpg",1024,511,true],"1536x1536":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/style2socialicons-copy-1536x766.jpg",1536,766,true],"2048x2048":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/style2socialicons-copy.jpg",1542,769,false],"rigtest-featured":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/style2socialicons-copy-720x480.jpg",720,480,true],"mailpoet_newsletter_max":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/style2socialicons-copy.jpg",1320,658,false]},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/thewpgeek.com\/author\/admin\/"},"uagb_comment_info":0,"uagb_excerpt":"This has good browser support (check developer notes keyframes and text-shadow). This effect applies a shining effect as the user hovers over the icon. This effect works best with the right colors, so do some experimenting! Icon Size Standard 2x3x5x6x Icon Type Square Standard Networks to Include FaceBook Twitter Pinterest YouTube Instagram Tumblr Whatsapp Choose&hellip;","_links":{"self":[{"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts\/2174"}],"collection":[{"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/comments?post=2174"}],"version-history":[{"count":1,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts\/2174\/revisions"}],"predecessor-version":[{"id":2348,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts\/2174\/revisions\/2348"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/media\/2328"}],"wp:attachment":[{"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/media?parent=2174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/categories?post=2174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/tags?post=2174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}