Adyyda Adyyda - 6 months ago 30
jQuery Question

On click, toggle Font Awesome cheat sheet value

I use for a project Font Awesome for icons and because they do not show in IE8 when I use it like:

<i class="fa fa-bars fa-2x"></i>


I am forced to use the cheat sheet icons as this:

<i class="mobile-search-icon fa fa-lg">&#xf002;</i>


This way, the icons show OK in IE8 as well.

Now, the problem... Using the cheat sheet icons, how can I replace the value with another on toggle? Please check the example below where you see initially the search icon and on click I should see a close icon and on another click, show again the search icon.

The example below is the closest way I have found so far, and I need some help if possible. Thanks



$(".mobile-search-icon").on('click', function(e) {
$(this).siblings(".search-container").fadeToggle(500);
if ($.trim($(this).text()) === '&#xf002;') {
$(this).text('&#xf00d;');
} else {
$(this).text('&#xf002;');
}

return false;
});

.search-bar {
display: table-cell;
vertical-align: middle;
}
.mobile-search-icon {
color: #fff;
display: block;
line-height: 50px;
width: 150px;
z-index: 1;
background-color: black;
text-align: center;
padding: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="search-bar">
<i class="mobile-search-icon fa fa-lg">&#xf002;</i>
</div>




Answer

Not sure exactly what you want, but it looks neat. I made a demo that uses FA's Unicode on Snippet 1.

I re-read your question, I think I understand ... You just want to toggle the button between 2 icons. If so look at Snippet 2. Your problem is that you are using .text() method which will add non-parsed plain text. .html() will take text and parse it to HTML so it's rendered as what the text represents, and not what it is literally.

SNIPPET 1

var tgt = document.querySelector('.search-bar');
var btn = document.querySelector('.search-btn');

btn.addEventListener('click', function(e) {
  var res = document.getElementById('result');
  var txt = document.getElementById('inputText').value;
  var mom = res.parentNode;
  if (res) {
    mom.removeChild(res);
  }
  genFA(txt);
}, false);


function genFA(x) {
  var baseUni = "&#xf";
  var iEle = document.createElement('i');
  iEle.id = 'result';
  iEle.classList.add('fa');
  iEle.classList.add('fa-lg');
  iEle.innerHTML = baseUni + x;
  return tgt.appendChild(iEle);
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  font: 400 16px/1.45'Verdana';
}
.search-bar {
  display: table;
  
  position: relative;
  height: 80px;
  padding: 5px 15px;
  width: 500px;
}
.search-btn {
  color: #fff;
  display: table-cell;
  line-height: 50px;
  width: 35%;
  background-color: black;
  text-align: center;
  padding: 10px 20px;
}
#inputText {
  display: table-cell;
  width: 25%;
  padding: 0 5px;
  font: 400 20px/30px'Consolas';
  text-align: center;
  vertical-align: middle;
}
#result {
  color: #000;
  line-height: 33px;
  width: 35%;
  background-color: #fff;
  text-align: center;
  vertical-align: middle;
  border: 1px solid black;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

<fieldset class="search-bar">
  <legend>Font-Awesome Unicode</legend>
  <input id="inputText">
  <i class="search-btn fa fa-lg">&#xf002;</i>
  <i id="result" class="fa fa-lg">&nbsp;</i>
</fieldset>

<p>Enter: 3 digit hexidecimal number.</p>
<p>Range: 000 - 2b1</p>
<p>Font-Awesome v.4.6.3</p>

SNIPPET 2

$(function() {
  $(".mobile-search-icon").on('click', function(e) {
    if ($(this).hasClass('on')) {
      $(this).html('&#xf00d;').toggleClass('on');
    } else {
      $(this).html('&#xf002;').toggleClass('on');
    }
  });
});
.search-bar {
  color: #fff;
  display: table-cell;
  vertical-align: middle;
  line-height: 30px;
  width: 150px;
  background-color: black;
  text-align: center;
  padding: 10px;
  cursor: pointer;
}
.mobile-search-icon {
  width: 100%;
}
.on {
  opacity: 1;
  transition: opacity 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<div class="search-bar">
  <i class="mobile-search-icon fa fa-lg on">&#xf002;</i>
</div>