I have a menu that consists of tabs. Tabs are simple text buttons. I would like to add indicators to each button so that if a user chooses something in a tab, the number of selected elements in the button of the corresponding section is displayed. An example of the indicator you can find below:

enter image description here

Only I have text buttons, not icons.
Could not find a solution to the problem. help me please

    1 answer 1

    Example

    <style> .icon { font-size: 30px; position: relative; } .icon:after { content:'1'; position: absolute; top: -5px; right: -10px; display: block; background-color: #ff0000; font-size: 18px; width: 20px; height: 20px; border-radius: 50%; text-align: center; color:#fff; } </style> <i class="fa fa-shopping-cart icon"></i>

    For example, something like that. This is if the problem is only in the plate with the number of elements, and not in the script that would consider these elements. PS Change the font-size to some other value, and then the icons somehow go awry.

    • Thank you very much @Sinnabon for helping me, I saved an hour