CODEWITHSUNDEEP
css
gb_spectrum
gb_spectrum

Reputation: 2301

CSS - positioning icon inside a button

I'm trying to add an icon inside a button. The problem is that whenever I add the icon, it changes the shape of the button (it makes it taller, and sometimes wider depending on how big the icon is), and it mis-aligns the text of the button so that it is no longer centered, rather the text has been pushed down.

 <button>
   <i class="material-icons">weekend</i>
   Test
 </button>

And the CSS:

i {
    color: #669FAB;
    font-size: 24px !important;
 }

 button {
    min-width: 100px;
 }

https://jsfiddle.net/uxs71ymz/1/

I would like the icon to shift to the left, while having the text remain centered inside the button.

Upvotes: 1

Views: 17356

Answers (2)

Ryan Tsui
Ryan Tsui

Reputation: 948

https://jsfiddle.net/hq9t8rk4/

button i.material-icons {
  color: #669FAB;
  font-size: 24px;
  // Add the below
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
}

button {
  min-width: 100px;
  // Add the below
  position: relative;
  padding: 3px 50px;
  line-height: 24px;
  text-align: center;
}

Upvotes: 2

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

hi here is the css code

CSS

i {
  color: #669FAB;
  font-size: 24px !important;
  vertical-align:middle;
}

button {
  min-width: 100px;
}

hope this helps..

Upvotes: 5

Related Questions