Question

I've followed the html example of a jQuery sliding menu from the following website:

http://github.danielcardoso.net/sliding-menu/

中插入Bootstrap徽章

我能够在<a>标签内添加图标，但我也想在其中插入一个bootstrap Badge元素。目前使用的jQuery插件似乎完全忽略或隐藏Bootstrap徽章元素。有没有办法在<a>标签内添加徽章元素？

<div id="menuHTML">
    <ul>
        <li>
            <a href="#">Catalogue</a>
            <ul>
                <li>
                    <a href="#">Bathroom
                        <i class="sm-set-icon fa fa-play"></i> Play
                    </a>

                </li>
                <li>
                    <a href="#">Bedroom</a>
                </li>
                <li>
                    <a href="#">Kitchen</a>
                </li>
                <li>
                    <a href="#">Living Room</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Orders</a>
            <ul>
                <li>
                    <a href="#">Pending</a>
                </li>
                <li>
                    <a href="#">Completed</a>
                </li>
                <li>
                    <a href="#">Other</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

如你所说，你正在使用 font-awesome icons ，所以我认为你缺少字体 - 真棒参考链接在你的头脑中添加以下链接，它将正常工作

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

另见下面的代码片段我添加了徽章，字体真棒图标和glyphicon供您使用。你可以随意使用

<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
  <style>

  </style>
</head>

<body>

<div id="menuHTML">
    <ul>
        <li>
            <a href="#">Catalogue</a>
            <ul>
                <li>
                    <a href="#">Bathroom  <span class="glyphicon glyphicon-search" aria-hidden="true"> </span></a>

                </li>
                <li>
                    <a href="#">Bedroom   <span class="badge">42</span></a>
                </li>
                <li>
                    <a href="#">Kitchen <i class="sm-set-icon fa fa-play"></i> Play</a>
                </li>
                <li>
                    <a href="#">Living Room</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Orders</a>
            <ul>
                <li>
                    <a href="#">Pending</a>
                </li>
                <li>
                    <a href="#">Completed</a>
                </li>
                <li>
                    <a href="#">Other</a>
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

Jquery插件不允许我在<a> tag

1 个答案: