Bootstrap 为我们提供了徽章来显示图标上的计数，可用于显示未读通知/消息等。我们需要获取图标徽章上的计数值并相应地更新该值。在本文中，我们将创建一个通知图标，它可以像未读通知一样保持计数。我们将把它分成两个不同的部分，在第一部分，我们将创建图标的结构，在第二部分，我们将设计图标并使图标具有响应性。
方法：我们将继续执行以下步骤，以确保无论 DOM 结构如何，我们始终可以获取图标的通知编号/徽章计数。
- 将图标和徽章包装在同一元素下。
- 使用 jQuery find()函数提取计数。
- 从提取的值中增加/减少徽章的计数。
- 更新值。
创建结构：下面是我们将用作模板的示例代码。最后，我们将根据以下问题陈述应用 jQuery。
- Font Awesome 中图标的 CDN 链接：
- HTML代码：
GeeksforGeeks
Icon with count Badge: 5
设计结构：在本节中，我们将设计结构并使图标具有响应性。
- CSS代码：
- JavaScript 代码：该方法的实现完全取决于开发人员，而 DOM 结构取决于所需的用例。开发人员不必将徽章与图标组合在同一元素中。
注意：稍后我们将通过链接在徽章上应用 jQuery 来对其进行分组，而不管开发人员的实现如何。
结合 HTML、CSS 和 JavaScript 代码：这是上面两部分创建结构和设计结构的组合的最终代码。
GeeksforGeeks
Icon with count Badge:
5
输出： 