Bootstrap Tutorial - Add plus icon to button








The following code shows how to add plus icon to button.

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
  href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<style type='text/css'>
button.account {<!--from  w w w  .  ja v  a  2  s .  com-->
  display: block;
  float: left;
  height: 80px;
  margin: 10px 10px;
  padding: 10px 5px;
  width: 170px;
}

.account h1 {
  font-size: 16px;
  height: 16px;
  margin: 0 0 5px;
  padding: 4px 0 2px;
}

.account .balance {
  display: block;
  font-size: 24px;
}

.account h1.plus {
  font-size: 24px;
  padding-top: 0px;
}
</style>
</head>
<body>
  <div id="accounts">
    <button class="account">
      <h1>Price</h1>
      <span class="balance">-123.45</span>
    </button>
    <button class="account">
      <h1 class="plus">
        <i class="icon icon-plus-sign"></i>
      </h1>
      <span class="plus-text">Add Account</span>
    </button>
  </div>
</body>
</html>

Click to view the demo