css - Bootstrap Font Awesome 徽章与数字

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并找到分层、文本和计数器

带有 JS 的 SVG 要求您使用 FontAwesome 的 JS 版本。可在此处找到最新的 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-层-右上角