<...">
All geek questions in one place

Is it possible to add an icon in bootstrap boot tabs?

<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>Tabs</h3> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> </div> </body> </html>

This is a sample code.

Is it possible to add the icon to the bootstrap nav bookmarks as shown below.

enter image description here

I want to add a number icon in the nav tabs.

+5
source share
3 answers

Working demo

You would do it with a badge ,

 <li class="active"><a href="#">Home<span class="badge">140</span></a></li>

and some CSS

 .nav-tabs .badge{ position: absolute; top: -10px; right: -10px; background: red; }
+5
source

Insert your icon and position relative to the container as follows:

 .count-badge { position: relative; top: -50px; right: -50px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> <div class="container"> <h3>Tabs</h3> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a> <span class="count-badge badge">140</span> </li> <li><a href="#">Menu 1</a> </li> <li><a href="#">Menu 2</a> </li> <li><a href="#">Menu 3</a> </li> </ul> </div> = "sha512-K1qjQ + NcF2TYO / eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG + aHRqLi / ETn2uB + 1JqwYqVG3LIvdm9lj6imS / pQ ==" <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> <div class="container"> <h3>Tabs</h3> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a> <span class="count-badge badge">140</span> </li> <li><a href="#">Menu 1</a> </li> <li><a href="#">Menu 2</a> </li> <li><a href="#">Menu 3</a> </li> </ul> </div>
+2
source

Yes, this is possible in several ways. Bootstrap has badges , which would be an elegant solution.

 <span class="badge">140</span>
+1
source

Source: https://habr.com/ru/post/1235498/

More articles:


All Articles