Bootstrap popover，strage下划线

Question

我正在使用Bootstrap API。我有一个字体真棒图标，当你将鼠标悬停在它上面时很容易旋转。然后我在你悬停时添加了popover，所以现在当你将鼠标悬停在它上面时，图标会有一个弹出窗口并旋转。但是，我在这个图标的右边有一个奇怪的下划线字符......

它发生在除最右边之外的每个图标上，没有下划线，它按预期工作。

有没有人遇到过这个问题，它来自哪里？

HTML：

<a class="popover-icon" data-trigger="hover" data-placement="bottom" data-content="Let us do the hard work for you.">
   <i class="hoverable fa fa-code fa-2x"></i>
</a>

使用Javascript：

 <!-- JavaScript -->
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap-hover-dropdown.js"</script>
    <script src="js/bootstrap-popover.js"</script>

    <script>
    $(".hoverable").mouseover(function(){
    $(this).addClass('fa-spin');
    });

    $(".hoverable").mouseout(function(){
    $(this).removeClass('fa-spin');
    });
    </script>

    <script>
    $(".hover-dropdown-menu").mouseover(function(){
    $(this).addClass('dropdown-toggle');});
    </script>

    <script>
    $(function(){$(".popover-icon").popover();});
    </script>

    <!-- Custom JavaScript for the Side Menu and Smooth Scrolling -->
    <script>
    $("#menu-close").click(function(e) {
        e.preventDefault();
        $("#sidebar-wrapper").toggleClass("active");
    });
    </script>
    <script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#sidebar-wrapper").toggleClass("active");
    });
    </script>
    <script>
    $(function() {
        $('a[href*=#]:not([href=#])').click(function() {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {

                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    });
    </script>