Javascript 微调器图标似乎不适用于<；按钮>；标签

在本例中单击时，我尝试使用微调器重新创建按钮：

HTML

A and Button tags:
<p>
<a class="btn btn-success has-spinner">
   <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
   Foo
 </a>
</p>
<p>
  <button class="btn btn-success has-spinner" name="btn">
    <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
    Foo
  </button>
</p>    

JS

我可以重新创建标签按钮来工作，但不能创建标签。在他的站点（链接在顶部）中，它们的工作方式相同。我丢了什么东西吗

我在flask中实现了这一点，并使用了WTFforms，因此我通过request.form.get['btn']获取事件，看来flask标记中的html是导致问题的原因

任何帮助都将不胜感激

---

编辑：对不起，我已经缩小了问题的范围，当我包括按钮的名称时，你的代码对我有效，只要你包括引导和字体真棒：我看到微调器正在对此进行链接，我的机器上安装了字体真棒字体，这就是为什么我能够在小提琴中看到它。你真的在加载字体文件吗？在您的页面上？当我没有为它添加name=“btn”时，我看到了微调器。我认为这可能与烧瓶有关？这不是烧瓶问题，而是渲染问题。btn是一个引导类。可以看出，btn使用相同的属性值类和名称导致了问题。这种类型的设置可能有效，也可能无效，这就是为什么您看到其他人拥有“健康”功能的原因。除非有严格的必要，否则应避免类似的重复值。您需要一个name属性——例如，将其命名为btn1（name=“btn1”）。

.spinner {
  display: inline-block;
  opacity: 0;
  max-width: 0;

  -webkit-transition: opacity 0.25s, max-width 0.45s; 
  -moz-transition: opacity 0.25s, max-width 0.45s;
  -o-transition: opacity 0.25s, max-width 0.45s;
  transition: opacity 0.25s, max-width 0.45s; /* Duration fixed since we animate additional hidden     width */
}

.has-spinner.active {
cursor:progress;
}

.has-spinner.active .spinner {
opacity: 1;
max-width: 50px; /* More than it will ever come, notice that this affects on animation duration */
}

$(function(){
$('a, button').click(function() {
    $(this).toggleClass('active');
});
});