将链接文本更改为图标

Question

您好我需要在将鼠标悬停在菜单后将文字更改为图标。 我从db获取数据，所以我需要动态地进行。

php in while

       echo'<li style="width: ' . $row['item_width'] . 'px;">
    <a href="stranky/' . $nazev . '/1/' . $row['id'] . '" 
style="background-color: #' . $row['item_color'] . ';" alt="'. $row['item_name'] . '" 
       class="menu_data" id="search">'. $row['item_name'] . '</a>';

JS

<script type="text/javascript">
      $(document).ready(function(){


        $(".menu_data" ).mouseover(function() {
          var icon = $(this).attr('id');
          $(this).html('<span class="glyphicon glyphicon-'+icon+'"></span>')
        });
        $(".menu_data" ).mouseout(function() {
          var name = $(this).attr('alt');
          $(this).html(name)
        });

      });

    </script>

但它看起来不太好看。有更好的想法吗？