是否可以在bootstrap导航标签中添加图标?

som*_*ter 5 html css twitter-bootstrap twitter-bootstrap-3

<!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>
Run Code Online (Sandbox Code Playgroud)

这是示例代码.

是否可以在bootstrap导航选项卡中添加图标,如下图所示.

在此输入图像描述

我想在导航标签中添加数字图标.

Pop*_*les 12

工作演示

你会用徽章做到这一点,

<li class="active"><a href="#">Home<span class="badge">140</span></a></li>
Run Code Online (Sandbox Code Playgroud)

还有一点CSS

.nav-tabs .badge{
    position: absolute;
    top: -10px;
    right: -10px;
    background: red;
}
Run Code Online (Sandbox Code Playgroud)