Align text with icon font in custom bootstrap button

Question

I´m trying to align some text with an icon-font icon in a button with custom height. The icon and the text should both be in the vertical center of the button with some pixels padding to the left and right side so that they both are in the horizontal center of the button. It also seems that the attribute which sets the size of the icon also doesn´t work.

/* Styles go here */
.btn-group{
  margin-top: 20px;
  margin-left: 20px;
}

#left, #middle, #right{
  height: 25px;
}

.button-content{
  
}

.button-icon{
  
}

.button-text{
  vertical-align:middle;
}

.button-text i{
  font-size: 12px; /* Change of icon-size doesn´t apply */
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>

  <body>
    
    <div class="btn-group">
      <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Left'" id="left">
        <span class="buton-content">
          <span class="button-icon"><i class="material-icons">info</i></span>
          <span class="button-text">CONTENT</span>
        </span>
      </label>
      <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Middle'" id="middle">
        <span class="buton-content">
          <span class="button-icon"><i class="material-icons">info</i></span>
          <span class="button-text">CONTENT</span>
        </span>
      </label>
      <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Right'" id="right">
        <span class="buton-content">
          <span class="button-icon"><i class="material-icons">info</i></span>
          <span class="button-text">CONTENT</span>
        </span>
      </label>
    </div>
    
  </body>

</html>

You can also find my code on Plunker.

EDIT

I fixed all issues besides the the fact that icon and text aren't in the vertical center of the button.

The Plunker was also updated.

EDIT 2:

The problem was fixed by using @MarcosPérezGude idea

#left, #middle, #right{
  height: 26px;
  padding-top: 1px;
  padding-bottom: 0px;      
}

in addition to @iyyappan answer with the partial solution

.material-icons {vertical-align: middle;}

Possible duplicate of [Center Twitter Bootstrap 3 Glyphicons in buttons](http://stackoverflow.com/questions/18273500/center-twitter-bootstrap-3-glyphicons-in-buttons) — Joel Meza Baca, Dec 25 '16 at 16:23

score 5 · Accepted Answer · answered Feb 29 '16 at 12:43

5

I checked your codes.

Please try it.

#left, #middle, #right {
    height: auto;
}
.material-icons {vertical-align: middle;}

answered Feb 29 '16 at 12:43

iyyappan

767
4
11

the alignment of the text and the icon works now but it just works with `height: auto`. I want to set the height of the button by myself. And why does the size of the icon doesn´t change ? – JohnDizzle Feb 29 '16 at 12:48
you are not able to change the height of the button with this mode, otherwise you'll obtain the error that you are trying to solve right now. Play with paddings but not with heights. Learn bootstrap first please – Marcos Pérez Gude Feb 29 '16 at 12:57
@MarcosPérezGude Thank you Marcos, the tipp with changing `padding` fixed the problem! I also updated the [Plunker](https://plnkr.co/edit/ctOmB2Cv2Ma8L58YeF68?p=preview). – JohnDizzle Feb 29 '16 at 13:09
You are welcome. However, you must to practice more with bootstrap I guess :) – Marcos Pérez Gude Feb 29 '16 at 14:17
This solution helped me. Thank you. – Saiyaff Farouk Jun 22 '16 at 09:20

score 0 · Answer 2 · answered Feb 29 '16 at 12:48

Please add vertical-align: middle; to the .material-icons class.

 .material-icons {
    vertical-align: middle;
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
        }

Anubhav pun · Answer 3 · 2016-02-29T13:01:10.890

0

try this may help you and for changing the size of icon use font-size

#left, #middle, #right
{
height:26px;
}

.material-icons 
{
vertical-align: middle;
font-size:13px;
}

.btn
{
padding:2px 12px;
}

edited Feb 29 '16 at 13:01

answered Feb 29 '16 at 12:52

Anubhav pun

1,323
2
8
20

score 0 · Answer 4 · answered Feb 29 '16 at 12:55



    .btn-group{
      margin-top: 20px;
      margin-left: 20px;
    }

    #left, #middle, #right{
      height: 25px;
    }

    .button-content{
      
    }

    .button-icon{
      
    }

    .button-text{
      vertical-align:middle;
    }

    .button-text i{
      font-size: 12px; /* Change of icon-size doesn´t apply */
    }
    #left, #middle, #right {
        height: auto;
    }
    .button-icon {
        display: inline-block;
        vertical-align: middle;
        line-height: 0;
    }
     
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">











     <div class="btn-group">
          <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Left'" id="left">
            <span class="buton-content">
              <span class="button-icon"><i class="material-icons">info</i></span>
              <span class="button-text">CONTENT</span>
            </span>
          </label>
          <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Middle'" id="middle">
            <span class="buton-content">
              <span class="button-icon"><i class="material-icons">info</i></span>
              <span class="button-text">CONTENT</span>
            </span>
          </label>
          <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Right'" id="right">
            <span class="buton-content">
              <span class="button-icon"><i class="material-icons">info</i></span>
              <span class="button-text">CONTENT</span>
            </span>
          </label>
        </div>

Himesh Aadeshara · Answer 5 · 2016-02-29T12:58:59.157

0

just remove below code from your custom css file style.css that is making issue of improper height.

#left, #middle, #right {
    /* height: 26px; */
}

your custom css height is overriding the default bootstrap's buttons' height

Note: Due to that you can't getting see your content in middle but (Actually is there in middle).

Button size in Bootstrap Reference Link

edited Feb 29 '16 at 12:58

answered Feb 29 '16 at 12:56

Himesh Aadeshara

2,114
16
26

But I need the specific height of 26 pixels ! – JohnDizzle Feb 29 '16 at 12:58
@JohnDizzle hii then you can use '.btn-xs' class with the lable that you have made button so that will work properly for you. here i attach the reference link for this please refer – Himesh Aadeshara Feb 29 '16 at 13:03

Align text with icon font in custom bootstrap button

5 Answers5