组件
Bootstrap 自带了大量可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
http://www.fontawesome.com.cn/也有大量可用图标使用，Font Awesome 完全兼容 Bootstrap 的所有组件。
Font Awesome下载解压后，可只留css和fonts目录文件，其余均可删除。
用span或i标签，因为是内联标签，想放在哪里都可以。
还可以对其设置颜色，直接对标签进行设置即可。
https://lipis.github.io/bootstrap-sweetalert/弹框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css"> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> <script src="../js/jquery-3.3.1.min.js"></script> <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script> <style> span,i{ color: saddlebrown; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <h2><span class="glyphicon glyphicon-user"></span> 登录注册</h2> <p><i class="fa fa-users" aria-hidden="true"></i> username:<input type="text" class="form-control" placeholder="请输入账号"></p> <p><i class="fa fa-key" aria-hidden="true"></i> password:<input type="text" class="form-control" placeholder="请输入密码"></p> </div> <div class="col-md-8 col-md-offset-2"> <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i> <span class="sr-only">Loading...</span> <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i> <span class="sr-only">Loading...</span> <i class="fa fa-refresh fa-spin fa-3x fa-fw"></i> <span class="sr-only">Loading...</span> <i class="fa fa-cog fa-spin fa-3x fa-fw"></i> <span class="sr-only">Loading...</span> <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i> <span class="sr-only">Loading...</span> </div> </div> </div> </body> </html>