我有一个带铃铛图标的导航。我想在图标的右上角添加一个包含数字的徽章(就像在一些 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>
最佳答案
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-层-右上角
关于css - Bootstrap Font Awesome 徽章与数字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50351284/