CODEWITHSUNDEEP
css
user9289573
user9289573

Reputation:

align material icon with the text

I'm using Material icons with the code below, but the icon has some style that puts the icon not aligned with the text. Do you know how to align the icon with the text?

https://jsfiddle.net/u127zxak/1/

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}

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

.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}

.alert-info hr {
  border-top-color: #abdde5;
}

.alert-info .alert-link {
  color: #062c33;
}
<div class="alert alert-info" role="alert">
  <span><i class="material-icons">face</i></span>

  <span>
        Test
      </span>
</div>

Upvotes: 3

Views: 10781

Answers (2)

Daniel Netzer
Daniel Netzer

Reputation: 2232

using flex you can align items perfectly,

<div class="alert alert-info" role="alert">
  <i class="material-icons">face</i>

  <span class="text">
    Test
  </span>
</div>

and in the CSS

.alert {
    display: flex;
    ...
}

.alert .text {
    align-self: center;
}

Upvotes: 1

hungerstar
hungerstar

Reputation: 21675

Set the icon <i> to vertical-align: middle;.

I would also remove the <span> tags, they're not really doing anything.

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}

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

.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}
<div class="alert alert-info" role="alert">
  <i class="material-icons">face</i> Test
</div>

Upvotes: 12

Related Questions