Bootstrap 3示例

删除设定

字体超赞
版本 4.6.3

Font Awesome完全兼容Bootstrap的所有组件。

<a class="btn btn-danger" href="#">
  <i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
  <i class="fa fa-cog"></i> Settings</a>
<a class="btn btn-lg btn-success" href="#">
  <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.6.3</a>
<div class="btn-group">
  <a class="btn btn-default" href="#">
    <i class="fa fa-align-left" title="左对齐"></i>
  </a>
  <a class="btn btn-default" href="#">
    <i class="fa fa-align-center" title="剧中对齐"></i>
  </a>
  <a class="btn btn-default" href="#">
    <i class="fa fa-align-right" title="右对齐"></i>
  </a>
  <a class="btn btn-default" href="#">
    <i class="fa fa-align-justify" title="平均分布"></i>
  </a>
</div>
<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  <input class="form-control" type="text" placeholder="您的邮箱地址">
</div>
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
  <input class="form-control" type="password" placeholder="请输入密码">
</div>
<div class="btn-group open">
  <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> 用户</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
    <span class="fa fa-caret-down" title="打开下拉菜单"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="fa fa-pencil fa-fw"></i> 编辑</a></li>
    <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> 删除</a></li>
    <li><a href="#"><i class="fa fa-ban fa-fw"></i> 屏蔽</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="fa fa-unlock"></i> 锁定管理员</a></li>
  </ul>
</div>