kobbycoder kobbycoder - 1 month ago 7
CSS Question

HTML div doesn't wrap <i> tag

I am trying to make my div wrap the

<i>
tag however it doesn't wrap, the height is always higher of my div, and my
<i>
tag has no padding or margin, i tried many things but doesn't work, i am adding my style and the html code, i am also going to add some screenshots

CSS

<style>
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: inherit;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
}

.button-content-ic {
display: inline-block;
margin: auto;
}

body, section, div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>


HTML

<div class="button-content-ic">
<i style="color: #fff;" class="material-icons">menu</i> </div>


SCREENSHOTS

tag

enter image description here

wrapper tag

enter image description here

Thanks in advance for your help.

Answer

Maybe this is what you looking for:

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  display: block!important;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
  color: #ffffff;
}
.button-content-ic {
  background-color: #555555;
  display: inline-block;
  margin: auto;
}
body,
section,
div,
i {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="button-content-ic"><i class="material-icons">menu</i>
</div>

Comments