<!DOCTYPE html> <html> <head> <title>Bootstrap 图标</title> <Meta charset="utf-8"> <Meta name="viewport" content="width=device-width,initial-scale=1.0"> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen"> <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" media="screen"> <script src="bootstrap/js/jquery.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="span12"> <h3>一个搜索表单</h3> <form class="well form-search" action=""> <input class="input-medium search-query" type="text" name="" id=""> <button class="btn" type="submit"><i class="icon-search"></i>submit</button> </form> </div> </div> </div> <hr/><br/> </body> </html> 预览效果: bootstrap图标的使用方法: <i class="icon_class_name"></i> 其中 "icon_class_name" 是在 bootstrap.css 中定义的图标 class 的名称(例如:icon-music、icon-star、icon-user 等)。 如果您想要使用白色图标,然后添加一个额外的 icon-white class,如下所示: <i class="icon_class_name icon-white"></i> </i>