{"id":2132,"date":"2021-06-08T15:35:04","date_gmt":"2021-06-08T15:35:04","guid":{"rendered":"http:\/\/localhost:10003\/?p=2132"},"modified":"2021-06-09T14:29:37","modified_gmt":"2021-06-09T18:29:37","slug":"socialmediaicon-generator-style-1","status":"publish","type":"post","link":"https:\/\/thewpgeek.com\/socialmediaicon-generator-style-1\/","title":{"rendered":"Social Media Icon Generator (Style 1)"},"content":{"rendered":"\n<p>This social media icon effect is achieved in just a few lines of CSS code. It has excellent browser support (check developer notes <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/transform-function\/translateY()\">translateY<\/a> and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/text-shadow\">text-shadow<\/a>). You can use the style generator below, or view our &#8220;<a href=\"http:\/\/localhost:10003\/font-awesome-social-icon-css\/\" data-type=\"post\" data-id=\"1937\">Social media icons with Font Awesome post<\/a>&#8221; which gives instructions on manually creating this effect. <\/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: black;\n  margin: 1px;\n}\n.social:hover {\n\ttext-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);\n\ttransform: translateY(-2px);\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   document.querySelector(\"#button_to_load_data\").addEventListener(\"click\", ()=>{\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'  : \"style1\",\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 social media icon effect is achieved in just a few lines of CSS code. It has excellent browser support (check developer notes translateY and text-shadow). You can use the style generator below, or view our &#8220;Social media icons with Font Awesome post&#8221; which gives instructions on manually creating this effect. Icon Size Standard 2x3x5x6x [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":2324,"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\/style1socialicons.jpg",1542,769,false],"thumbnail":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/style1socialicons-150x150.jpg",150,150,true],"medium":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/style1socialicons-300x150.jpg",300,150,true],"medium_large":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/style1socialicons-768x383.jpg",768,383,true],"large":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/style1socialicons-1024x511.jpg",1024,511,true],"1536x1536":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/style1socialicons-1536x766.jpg",1536,766,true],"2048x2048":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/style1socialicons.jpg",1542,769,false],"rigtest-featured":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/style1socialicons-720x480.jpg",720,480,true],"mailpoet_newsletter_max":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/style1socialicons.jpg",1320,658,false]},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/thewpgeek.com\/author\/admin\/"},"uagb_comment_info":0,"uagb_excerpt":"This social media icon effect is achieved in just a few lines of CSS code. It has excellent browser support (check developer notes translateY and text-shadow). You can use the style generator below, or view our &#8220;Social media icons with Font Awesome post&#8221; which gives instructions on manually creating this effect. Icon Size Standard 2x3x5x6x&hellip;","_links":{"self":[{"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts\/2132"}],"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=2132"}],"version-history":[{"count":2,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts\/2132\/revisions"}],"predecessor-version":[{"id":2347,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts\/2132\/revisions\/2347"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/media\/2324"}],"wp:attachment":[{"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/media?parent=2132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/categories?post=2132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/tags?post=2132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}