Bootstrap 字体真棒徽章与数字

Question

我有一个带有响铃图标的导航。我想添加一个徽章，其中包含图标右上角的数字（就像在一些 Android 应用程序中一样）。我发现一些博客可以完成此操作，在 css 中添加数字，但我需要在服务器端添加数字，所以执行如下操作：

<span>$number</span>

会更好。

到目前为止，布局看起来像这样：

        <li class="nav-item dropdown">
            <a href="#" id="navbar-inquiries-dropdown" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                <i class="fas fa-bell"></i>
                // here add badge????
            </a>
            <ul class="nav-item dropdown-menu" role="menu" aria-labelledby="navbar-inquiries-dropdown">
               <li class="nav-item">
                    <a class="dropdown-item" href="{{ route('inquiry.index') }}">
                        Requests
                    </a>
                </li>
            </ul>
        </li>

Answer 1

FontAwesome 在他们的文档中有这个。

查看https://fontawesome.com/how-to-use/svg-with-js并找到 分层、文本和计数器

SVG with JS 要求您使用 JS 版本的 FontAwesome。最新的 CDN 链接可以在这里找到：https ://fontawesome.com/get-started/svg-with-js

<span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-bell"></i>
    <span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>`

您可以使用以下类来定位计数器： fa-layers-bottom-left、fa-layers-bottom-right和fa-layers-top-left默认值fa-layers-top-right