Want to Make Font Awesome Icons Clickable

How to make font awesome icon clickable event

The problem with your current code is that the icon is rendered as a svg within the button. This is an independent element and the onclick attribute does not apply to it.

The best way to solve this is to explicitly set the pointer-events to none for the icon SVG:

.dropbtn > svg {
  pointer-events: none
}

The pointer-events property dictates how the UI should respond to events on the object. By setting it to none, we are saying that this object does not process events and they are therefore passed to the object underneath the SVG.

The working snippet showing this can be seen below.

function myFunction() {  document.getElementById("myDropdown").classList.toggle("show");}
// Close the dropdown if the user clicks outside of itwindow.onclick = function(event) {  if (!event.target.matches('.dropbtn')) {    var dropdowns = document.getElementsByClassName("dropdown-content");    var i;    for (i = 0; i < dropdowns.length; i++) {      var openDropdown = dropdowns[i];      if (openDropdown.classList.contains('show')) {        openDropdown.classList.remove('show');      }    }  }}

.dropbtn {  background-color: #3498DB;  color: white;  padding: 10px;  font-size: 10px;  border: none;  cursor: pointer;}
.dropbtn:hover, .dropbtn:focus {  background-color: #2980B9;  pointer-events: all;    }
.dropdown {  position: relative;  display: inline-block;}
.dropdown-content {  display: none;  position: absolute;  background-color: #f1f1f1;  min-width: 160px;  overflow: auto;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  z-index: 1200;}
.dropdown-content a {  color: black;  padding: 12px 16px;  text-decoration: none;  display: block;}
.dropdown a:hover {background-color: #ddd; display: block;}
.show {display: block;}
.dropbtn > svg {  pointer-events: none}

<script src="https://use.fontawesome.com/releases/v5.11.2/js/all.js" data-auto-replace-svg="nest"></script>    <body>
<div id="dropdown">    <button class="dropbtn fas fa-bars fa-2x" onclick="myFunction()" style="visibility: visible;"></button>  <div id="myDropdown" class="dropdown-content">  <a href=""> DROPDOWN CONTENT </a>    <a href=""> DROPDOWN CONTENT </a>      <a href=""> DROPDOWN CONTENT </a>  </div>  
</div>
</body>

How to make icon clickable

Remove the list, it's not needed

<html>
<head>
<script src="https://kit.fontawesome.com/2442adcce2.js" crossorigin="anonymous"></script> 
 </head>
 <body>
 <a href ="https://www.w3schools.com">
            <i class="fas fa-shopping-cart p-2"></i>
 </a> 
</body>
</html>

This works perfectly, feel free to reply if it doesn't work. I've tested it to make sure.

Clickable font-awesome icons in a clickable dropdown menu

You can add .fa to your function

Code:

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn, .fa')) {
    var myDropdown = document.getElementById("myDropdown");
    if (myDropdown.classList.contains('show')) {
      myDropdown.classList.remove('show');
    }
  }
}

Fiddle:

/* When the user clicks on the button, toggle between hiding and showing the dropdown content */function myFunction() {  document.getElementById("myDropdown").classList.toggle("show");}
// Close the dropdown if the user clicks outside of itwindow.onclick = function(e) {  if (!e.target.matches('.dropbtn, .fa')) {    var myDropdown = document.getElementById("myDropdown");    if (myDropdown.classList.contains('show')) {      myDropdown.classList.remove('show');    }  }}

.navbar {  overflow: hidden;  background-color: #333;  font-family: Arial, Helvetica, sans-serif;}
.navbar a {  float: left;  font-size: 16px;  color: white;  text-align: center;  padding: 14px 16px;  text-decoration: none;}
.dropdown {  float: left;  overflow: hidden;}
.dropdown .dropbtn {  cursor: pointer;  font-size: 16px;  border: none;  outline: none;  color: white;  padding: 14px 16px;  background-color: inherit;  font-family: inherit;  margin: 0;}
.navbar a:hover,.dropdown:hover .dropbtn,.dropbtn:focus {  background-color: red;}
.dropdown-content {  display: none;  position: absolute;  background-color: #f9f9f9;  min-width: 160px;  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);  z-index: 1;}
.dropdown-content a {  float: none;  color: black;  padding: 12px 16px;  text-decoration: none;  display: block;  text-align: left;}
.dropdown-content a:hover {  background-color: #ddd;}
.show {  display: block;}

<!DOCTYPE html><html>
<head>  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></head>
<body>
  <div class="navbar">    <a href="#home">Home</a>    <a href="#news">News</a>    <div class="dropdown">      <button class="dropbtn" onclick="myFunction()">Dropdown    <i class="fa fa-caret-down"></i>  </button>      <div class="dropdown-content" id="myDropdown">        <a href="#">Link 1</a>        <a href="#">Link 2</a>        <a href="#">Link 3</a>      </div>    </div>  </div></body>
</html>

Font-Awesome: Can I make icon clickable?

React event bindings do not work without an actual function wrapper.

Try it as onClick={()=>{alert('clicked')}}

Font awesome icons not clickable

Don't put an A tag inside BUTTON. It's wrong. Since you are using Bootstrap you can assign the same btn classes to A too.

<a href="google.com" class="btn btn-default pull-right" title="Edit"> <i class="fa fa-plus"></i> </a>