{"id":2231,"date":"2021-06-09T07:49:12","date_gmt":"2021-06-09T07:49:12","guid":{"rendered":"http:\/\/localhost:10003\/socialmediaicon-style3-copy\/"},"modified":"2021-06-14T13:34:51","modified_gmt":"2021-06-14T17:34:51","slug":"icon-maker-5","status":"publish","type":"post","link":"https:\/\/thewpgeek.com\/icon-maker-5\/","title":{"rendered":"Social Media Icon Maker (Style 5)"},"content":{"rendered":"\n<p>This has good browser support (check developer notes for <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/radial-gradient()\">radial-gradient <\/a>. If you need to support older browsers remove the gradient from the Instagram logo).  This effect gives a 360 rotation when the user hovers. This effect uses a moderate amount of CSS code.<\/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\n\n#textContentOutput{\n  white-space: pre-wrap;\n}\n\n.wrapper{\n  display:flex;\n  flex-direction: row;\n  padding: 0 20px;\n  align-items: center;\n  justify-content: center;\n}\n\n.fab {\n  padding: 20px;\n  min-width: 40px\n\n}\n.social{\n  color: #FFF;\n\ttransition: all ease-out 0.5s;\n\t-moz-transition: all ease-out 0.5s;\n\t-webkit-transition: all ease-out 0.5s;\n\t-o-transition: all ease-out 0.5s;\n}\n.social:hover {\n\ttext-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);\n\ttransition: all ease 0.5s;\n\t-moz-transition: all ease-in 0.5s;\n\t-webkit-transition: all ease-in 0.5s;\n\t-o-transition: all ease-in 0.5s;\n  \n}\n\n.facebook:hover {\n  transform: scale(1.5) rotate(360deg);\n}\n.twitter:hover {\n    transform: scale(1.5) rotate(360deg);\n}\n.youtube:hover {\n    transform: scale(1.5) rotate(360deg);\n}\n.pinterest:hover {\n    transform: scale(1.5) rotate(360deg);\n}\n.instagram:hover {\n    transform: scale(1.5) rotate(360deg);\n \n}\n.tumblr:hover {\n    transform: scale(1.5) rotate(360deg);\n}\n.whatsapp:hover {\n    transform: scale(1.5) rotate(360deg);\n}\n\n\n#facebook {\n  background-color:#4267B2;\n}\n\n#twitter {\n background-color:#1DA1F2;\n\n}\n#youtube {\n        background-color:#c4302b;\n}\n#pinterest {\n        background-color:#c8232c;\n}\n#instagram {\n  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);\n  background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);\n\n}\n#tumblr {\n        background-color: #34526f;\n}\n#whatsapp {\n        background-color:#25D366;\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   \n<option>3x<\/option>\n\n <option>Standard <\/option>\n    <option>2x<\/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>Standard<\/option>\n<option>Square <\/option>\n    \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\" id=\"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\" value=\"#FFFFFF\">\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><\/p>\n<\/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\">\n  <div id=\"facebook\"><i class=\"fab fa-facebook social  facebook fa-3x\"><\/i><\/div>\n  <div id=\"pinterest\"><i class=\"fab fa-pinterest social  pinterest fa-3x\"><\/i><\/div>\n  <div id=\"twitter\"><i class=\"fab fa-twitter social  twitter fa-3x\"><\/i><\/div>\n  <div id=\"instagram\"><i class=\"fab fa-instagram social  instagram fa-3x\"><\/i><\/div>\n  <div id=\"tumblr\"><i class=\"fab fa-tumblr social  tumblr fa-3x\"><\/i><\/div>\n  <div id=\"whatsapp\"><i class=\"fab fa-whatsapp social  whatsapp fa-3x\"><\/i><\/div>\n  <div id=\"youtube\"><i class=\"fab fa-youtube social  youtube fa-3x\"><\/i><\/div>\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  typeChange();\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 div = document.createElement(\"DIV\");\ndiv.id = networkName;  \nlet btn = document.createElement(\"I\"); \nlet targetDiv = document.querySelector(\".wrapper\");\n btn.className = 'fab fa-facebook-square social facebook';\ndiv.appendChild(btn);   \n  targetDiv.appendChild(div); \n}\nif(networkName == \"instagram\"){\nlet div = document.createElement(\"DIV\");\ndiv.id = networkName;  \nlet btn = document.createElement(\"I\"); \nlet targetDiv = document.querySelector(\".wrapper\");\n btn.className = 'fab fa-instagram-square social instagram';\ndiv.appendChild(btn);   \n  targetDiv.appendChild(div); \n}\nif(networkName == \"tumblr\"){\nlet div = document.createElement(\"DIV\");\ndiv.id = networkName;  \nlet btn = document.createElement(\"I\"); \nlet targetDiv = document.querySelector(\".wrapper\");\n btn.className = 'fab fa-tumblr-square social tumblr';\ndiv.appendChild(btn);   \n  targetDiv.appendChild(div); \n}\n  if(networkName == \"whatsapp\"){\nlet div = document.createElement(\"DIV\");\ndiv.id = networkName;  \nlet btn = document.createElement(\"I\"); \nlet targetDiv = document.querySelector(\".wrapper\");\n btn.className = 'fab fa-whatsapp-square social whatsapp';\ndiv.appendChild(btn);   \n  targetDiv.appendChild(div); \n}\n  if(networkName == \"twitter\"){\nlet div = document.createElement(\"DIV\");\ndiv.id = networkName;  \nlet btn = document.createElement(\"I\"); \nlet targetDiv = document.querySelector(\".wrapper\");\n btn.className = 'fab fa-twitter-square social twitter';\ndiv.appendChild(btn);   \n  targetDiv.appendChild(div); \n}\n  \n   if(networkName == \"pinterest\"){\nlet div = document.createElement(\"DIV\");\ndiv.id = networkName;  \nlet btn = document.createElement(\"I\"); \nlet targetDiv = document.querySelector(\".wrapper\");\n btn.className = 'fab fa-pinterest-square social pinterest';\ndiv.appendChild(btn);   \n  targetDiv.appendChild(div); \n}\n  \n     if(networkName == \"youtube\"){\nlet div = document.createElement(\"DIV\");\ndiv.id = networkName;  \nlet btn = document.createElement(\"I\"); \nlet targetDiv = document.querySelector(\".wrapper\");\n btn.className = 'fab fa-youtube-square social youtube';\ndiv.appendChild(btn);   \n  targetDiv.appendChild(div); \n}\n  \nupdate();    \n  \n}  else {\n \/\/ it exists, lets remove it\n  targetElement.remove();\ndocument.getElementById(networkName).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\n\nfor (let i=0; i < num; i++){\nclasses += document.querySelector(\".wrapper\").children[i].firstElementChild.className.split(' ');\nclasses += \",\";\nconsole.log(classes);\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\n\/\/let typeclass = document.getElementsByClassName('fab');\nlet typeclass = \"\";\nlet type = document.getElementById(\"typeSelect\").value;\n \nif (type ==\"Square\"){\nfor (let i=0; i < networks.length; i++){\ntypeclass = document.querySelector(\".\" + networks[i]);\nconsole.log(typeclass);\ntypeclass.classList.add(\"fa-\"+networks[i]+\"-square\");\n}\n}\nif (type ==\"Standard\"){\nfor (let i=0; i < networks.length; i++){\ntypeclass = document.querySelector(\".\" + networks[i]);\nconsole.log(typeclass);\ntypeclass.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 += document.querySelector(\".wrapper\").children[i].firstElementChild.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 = document.querySelector(\"#color1\").value;\nlet backColor = document.querySelector(\"#color\").value;\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'  : \"style5\",\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 for radial-gradient . If you need to support older browsers remove the gradient from the Instagram logo). This effect gives a 360 rotation when the user hovers. This effect uses a moderate amount of CSS code. Icon Size 3xStandard 2x5x6x Icon Type StandardSquare Networks to Include FaceBook [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":2341,"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\/styleicons5.jpg",1542,769,false],"thumbnail":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/styleicons5-150x150.jpg",150,150,true],"medium":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/styleicons5-300x150.jpg",300,150,true],"medium_large":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/styleicons5-768x383.jpg",768,383,true],"large":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/styleicons5-1024x511.jpg",1024,511,true],"1536x1536":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/styleicons5-1536x766.jpg",1536,766,true],"2048x2048":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/styleicons5.jpg",1542,769,false],"rigtest-featured":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/styleicons5-720x480.jpg",720,480,true],"mailpoet_newsletter_max":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/styleicons5.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 for radial-gradient . If you need to support older browsers remove the gradient from the Instagram logo). This effect gives a 360 rotation when the user hovers. This effect uses a moderate amount of CSS code. Icon Size 3xStandard 2x5x6x Icon Type StandardSquare Networks to Include FaceBook&hellip;","_links":{"self":[{"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts\/2231"}],"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=2231"}],"version-history":[{"count":3,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts\/2231\/revisions"}],"predecessor-version":[{"id":2530,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts\/2231\/revisions\/2530"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/media\/2341"}],"wp:attachment":[{"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/media?parent=2231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/categories?post=2231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/tags?post=2231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}