单击，切换Font Awesome备忘单值

Question

我用于一个项目Font Awesome用于图标，因为当我使用它时它们不会在IE8中显示：

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

我被迫使用备忘单图标：

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

这样，图标在IE8中也显示OK。

现在，问题是...使用备忘单图标，如何在切换时用另一个替换值？请查看下面最初看到搜索图标的示例，然后单击我应该看到一个关闭图标，再次单击，再次显示搜索图标。

以下示例是我到目前为止找到的最接近的方式，如果可能，我需要一些帮助。感谢

＆＃13;

＆＃13;

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

  return false;
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

不确定你想要什么，但看起来很整洁。我在Snippet 1上制作了一个使用FA＆＃Unicode的演示。

我重读了你的问题，我想我明白了...你只想在2个图标之间切换按钮。如果是这样，请查看Snippet 2.您的问题是您正在使用use a\namespaced\classname as coolclass; class_exists( 'coolclass' ) => false 方法，该方法将添加未解析的纯文本。 .text()将获取文本并将其解析为HTML，以便将其呈现为文本所代表的内容，而不是字面上的内容。

SNIPPET 1

＆＃13;

＆＃13;

.html()

＆＃13;

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);
}

＆＃13;

*,
*: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;
}

＆＃13;

＆＃13;

＆＃13;

SNIPPET 2

＆＃13;

＆＃13;

<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>

＆＃13;

$(function() {
  $(".mobile-search-icon").on('click', function(e) {
    if ($(this).hasClass('on')) {
      $(this).html('').toggleClass('on');
    } else {
      $(this).html('').toggleClass('on');
    }
  });
});

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;