{"id":2669,"date":"2021-06-17T07:14:29","date_gmt":"2021-06-17T11:14:29","guid":{"rendered":"https:\/\/thewpgeek.com\/?p=2669"},"modified":"2021-06-17T09:03:36","modified_gmt":"2021-06-17T13:03:36","slug":"tutorial-how-to-add-font-awesome-icon-to-form-input","status":"publish","type":"post","link":"https:\/\/thewpgeek.com\/tutorial-how-to-add-font-awesome-icon-to-form-input\/","title":{"rendered":"Tutorial: How to add Font Awesome icon to form input"},"content":{"rendered":"\n<p>It&#8217;s often nice to add small font awesome icons inside form fields. For instance, on a contact form, we can add a little email icon, person icon, phone icon all inside the form field. If we include the FontAwesome Library I am a firm believer that we should get some real value out of it and not just use it for some social media icons. This is a nice little enhancement that works with the latest version of Font Awesome. <\/p>\n\n\n\n<p>What we are making : <\/p>\n\n\n\n<style>\n#inputleft {\n  padding-left:35px;\n  height: 2em;\n  width: 30em;\n  border: 2px solid #acacac;\n  border-radius: 0.5em;\n  font-size: 1em;\n}\n\n#iconnameleft {\n    position: relative;\n  font-size: 1.3em;\n    z-index: 1;\n    left: 10px;\n    top: 1px;\n    color: #7B7B7B;\n    cursor:pointer;\n    width: 0;\n}\n<\/style>\n<div>\n<i id=\"iconnameleft\" class=\"fa fa-address-card\"><\/i>\n<input id=\"inputleft\" type=\"text\" placeholder=\"Name\">\n<\/div>\n\n\n\n<p>We will be looking at moving the icons from the left to the right-hand side, and also set up an event listener so that we can use this as a search field. For the above style, we are loading the standard icon to the left of the input, then with CSS moving it into the correct position. We then add small padding to the input to allow for the icon. This is a good place to note that <a href=\"https:\/\/fontawesome.com\/v5\/cheatsheet\">FontAwesome has a cheat sheet<\/a> to easily find icons, replace the fa-address-card class below with fa-<strong><em>icon-name<\/em><\/strong> from the cheat sheet.  Here is the HTML code : <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;i class=\"fa fa-address-card iconnameleft\"&gt;&lt;\/i&gt;\n&lt;input class=\"inputleft\" type=\"text\" placeholder=\"Name\" \/&gt;<\/code><\/pre>\n\n\n\n<p>And the CSS code looks like this : <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.inputleft {\n    padding-left:35px;\n    height: 2em;\n    width: 30em;\n    border: 2px solid #acacac;\n    border-radius: 0.5em;\n    font-size: 1em;\n}\n\n.iconnameleft {\n    position: relative;\n    font-size: 1.3em;\n    z-index: 1;\n    left: 10px;\n    top: 1px;\n    color: #7B7B7B;\n    cursor:pointer;\n    width: 0;\n}\n<\/code><\/pre>\n\n\n\n<p>And thats it! the nice thing is as we aren&#8217;t using the icon code in the CSS like some solutions we can use multiple inputs with the same CSS rules and just change the icon in the HTML. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Input with FontAwesome Icon on the Right<\/h4>\n\n\n\n<p>This is what we are working on now :<\/p>\n\n\n\n<style>\n.input2 {\n  height: 2em;\n  width: 30em;\n  border: 2px solid #acacac !important;\n  border-radius: 0.5em !important;\n  font-size: 1em;\n}\n.iconsubmit {\n    position: relative;\n  font-size: 1.3em;\n    z-index: 1;\n    left: -35px;\n    top: 1px;\n    color: #7B7B7B;\n    cursor:pointer;\n    width: 0;\n}\n<\/style>\n<div>\n<input class=\"input2\" type=\"text\" placeholder=\"Search\">\n<i class=\"fa fa-search iconsubmit\"><\/i>\n<\/div>\n\n\n\n<p>The HTML code is very similar, but we now add the icon after the input : <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input class=\"input\" type=\"text\" placeholder=\"Search\" \/&gt;\n&lt;i  class=\"fa fa-search iconsubmit\"&gt;&lt;\/i&gt;<\/code><\/pre>\n\n\n\n<p>And the CSS code uses a negative number to align the icon back into the input :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.input {\n    height: 2em;\n    width: 30em;\n    border: 2px solid #acacac;\n    border-radius: 0.5em;\n    font-size: 1em;\n}\n.iconsubmit {\n    position: relative;\n    font-size: 1.3em;\n    z-index: 1;\n    left: -30px;\n    top: 1px;\n    color: #7B7B7B;\n    cursor:pointer;\n    width: 0;\n}<\/code><\/pre>\n\n\n\n<p>So now you know how to add icons on the left and the right of an input, but what if we want the icon clickable? Well first we should make sure the user realizes its clickable, we should style a change as the user moves the cursor over the search icon, this is a simple color change but you could style it however you wanted. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.iconsubmit:hover {\n  color: #add8e6;\n}<\/code><\/pre>\n\n\n\n<p>Now we need some JavaScript to watch this icon and do something when its clicked. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\nconst button = document.querySelector(\".iconsubmit\");\n\nbutton.addEventListener(\"click\", ()=&gt;{\n  \/\/ Do whatever you need here. \n  alert('It works!');                     \n})\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Here is all the code for both styles on a CodePen for easy reference and editing. <\/p>\n\n\n\n<p class=\"codepen\" data-height=\"500\" data-theme-id=\"light\" data-default-tab=\"css,result\" data-user=\"matt-egginton\" data-slug-hash=\"VwpggEN\" style=\"height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Form Inputs\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/matt-egginton\/pen\/VwpggEN\">\n  Form Inputs<\/a> by Matt Egginton (<a href=\"https:\/\/codepen.io\/matt-egginton\">@matt-egginton<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s often nice to add small font awesome icons inside form fields. For instance, on a contact form, we can add a little email icon, person icon, phone icon all inside the form field. If we include the FontAwesome Library I am a firm believer that we should get some real value out of it [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2692,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_uag_custom_page_level_css":"","footnotes":""},"categories":[2,136],"tags":[143,145,144,140],"uagb_featured_image_src":{"full":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/network-1989138_1920.png",1920,1280,false],"thumbnail":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/network-1989138_1920-150x150.png",150,150,true],"medium":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/network-1989138_1920-300x200.png",300,200,true],"medium_large":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/network-1989138_1920-768x512.png",768,512,true],"large":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/network-1989138_1920-1024x683.png",1024,683,true],"1536x1536":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/network-1989138_1920-1536x1024.png",1536,1024,true],"2048x2048":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/network-1989138_1920.png",1920,1280,false],"rigtest-featured":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/network-1989138_1920-720x480.png",720,480,true],"mailpoet_newsletter_max":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/network-1989138_1920.png",1320,880,false]},"uagb_author_info":{"display_name":"wpgeek","author_link":"https:\/\/thewpgeek.com\/author\/wpgeek\/"},"uagb_comment_info":269,"uagb_excerpt":"It&#8217;s often nice to add small font awesome icons inside form fields. For instance, on a contact form, we can add a little email icon, person icon, phone icon all inside the form field. If we include the FontAwesome Library I am a firm believer that we should get some real value out of it&hellip;","_links":{"self":[{"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts\/2669"}],"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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/comments?post=2669"}],"version-history":[{"count":19,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts\/2669\/revisions"}],"predecessor-version":[{"id":2700,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts\/2669\/revisions\/2700"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/media\/2692"}],"wp:attachment":[{"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/media?parent=2669"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/categories?post=2669"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/tags?post=2669"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}