{"id":2268,"date":"2021-06-09T13:15:53","date_gmt":"2021-06-09T13:15:53","guid":{"rendered":"http:\/\/localhost:10003\/icon-maker-5-copy\/"},"modified":"2021-06-09T18:11:31","modified_gmt":"2021-06-09T22:11:31","slug":"icon-maker-6-generator","status":"publish","type":"post","link":"https:\/\/thewpgeek.com\/icon-maker-6-generator\/","title":{"rendered":"Social Media Icon Maker (Style 6)"},"content":{"rendered":"\n<p>This effect is CSS heavy &#8211; if you are trying to keep it slim choose another style. This works best at 3x size, and is designed for the end of a post or page. You can adjust icon size on the generator, but you may need to make some CSS changes manually if you want to make the icons larger or smaller. <\/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.wrapper{\n  display:flex;\n  flex-direction: row;\n  padding: 0 20px;\n  align-items: center;\n  justify-content: center;\n}\n\n\n.fab {\nmargin: auto;\n\n}\n.social{\n  color: #FFF;\n  transition: all 0.35s;\n  transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);\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 {\n color:#4267B2;\n}\n\n.twitter {\ncolor:#1DA1F2;\n\n}\n.youtube {\n      color:#c4302b;\n}\n.pinterest {\n   color:#c8232c;\n}\n.instagram {\n color: transparent;\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  background-clip: text;\n  -webkit-background-clip: text;\n\n}\n.tumblr {\n        color: #34526f;\n}\n.whatsapp {\n        color:#25D366;\n}\n\n.bg-ico {\n  display: flex;\n  background-color: #FFF;\n  width: 90px;\n  height: 90px;\n  line-height: 90px;\n  margin: 0 5px;\n  text-align: center;\n  position: relative;\n  overflow: hidden;\n  border-radius: 28%;\n  box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);\n  opacity: 0.99;\n  -webkit-transition: background-color 2s ease-out;\n  -moz-transition: background-color 2s ease-out;\n  -o-transition: background-color 2s ease-out;\n  transition: background-color 2s ease-out;\n  \n}\n.bg-ico:hover{\n     box-shadow: 0 5px 15px -5px rgba(0,0,0,0.8);\n}\n\n#facebook:hover {\n  background-color: #4267B2;\n}\n\n#twitter:hover {\nbackground-color: #1DA1F2;\n\n}\n#youtube:hover {\n      background-color: #c4302b;\n}\n#pinterest:hover {\n   background-color:#c8232c;\n}\n#instagram:hover {\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}\n#tumblr:hover {\n    background-color: #34526f;\n}\n#whatsapp:hover {\n       background-color:#25D366;\n}\n\n.facebook:hover, \n.twitter:hover, \n.youtube:hover, \n.pinterest:hover,\n.instagram:hover, \n.tumblr:hover,\n.whatsapp:hover {\n color:#fff;\n transform: scale(1.3);\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\nDisabled for this style.\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 class=\"bg-ico\" id=\"facebook\"><i class=\"fab fa-facebook social  facebook fa-3x\"><\/i><\/div>\n<div class=\"bg-ico\" id=\"pinterest\"><i class=\"fab fa-pinterest social  pinterest fa-3x\"><\/i><\/div>\n<div class=\"bg-ico\" id=\"twitter\"><i class=\"fab fa-twitter social  twitter fa-3x\"><\/i><\/div>\n<div class=\"bg-ico\" id=\"instagram\"><i class=\"fab fa-instagram social  instagram fa-3x\"><\/i><\/div>\n<div class=\"bg-ico\" id=\"tumblr\"><i class=\"fab fa-tumblr social  tumblr fa-3x\"><\/i><\/div>\n <div class=\"bg-ico\" id=\"whatsapp\"><i class=\"fab fa-whatsapp social  whatsapp fa-3x\"><\/i><\/div>\n<div class=\"bg-ico\" 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  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;  \n div.className = 'bg-ico';\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;  \n div.className = 'bg-ico';\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;  \n div.className = 'bg-ico';\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;  \n div.className = 'bg-ico';\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; \n div.className = 'bg-ico'; \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;  \n div.className = 'bg-ico';\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;  \n div.className = 'bg-ico';\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 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         'backgroundColor'  : backColor,\n         'networks'  : networks,\n         'size'  : size,\n         'style'  : \"style6\",\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 effect is CSS heavy &#8211; if you are trying to keep it slim choose another style. This works best at 3x size, and is designed for the end of a post or page. You can adjust icon size on the generator, but you may need to make some CSS changes manually if you want [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":2304,"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\/fontawesomeicons6.jpg",1542,769,false],"thumbnail":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/fontawesomeicons6-150x150.jpg",150,150,true],"medium":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/fontawesomeicons6-300x150.jpg",300,150,true],"medium_large":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/fontawesomeicons6-768x383.jpg",768,383,true],"large":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/fontawesomeicons6-1024x511.jpg",1024,511,true],"1536x1536":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/fontawesomeicons6-1536x766.jpg",1536,766,true],"2048x2048":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/fontawesomeicons6.jpg",1542,769,false],"rigtest-featured":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/fontawesomeicons6-720x480.jpg",720,480,true],"mailpoet_newsletter_max":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/fontawesomeicons6.jpg",1320,658,false]},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/thewpgeek.com\/author\/admin\/"},"uagb_comment_info":2,"uagb_excerpt":"This effect is CSS heavy &#8211; if you are trying to keep it slim choose another style. This works best at 3x size, and is designed for the end of a post or page. You can adjust icon size on the generator, but you may need to make some CSS changes manually if you want&hellip;","_links":{"self":[{"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts\/2268"}],"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=2268"}],"version-history":[{"count":3,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts\/2268\/revisions"}],"predecessor-version":[{"id":2373,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts\/2268\/revisions\/2373"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/media\/2304"}],"wp:attachment":[{"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/media?parent=2268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/categories?post=2268"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/tags?post=2268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}