How do I fix the positioning of material icons?-CodePudding

I am attempting to fix the offset between the text and the material icon.

I have no position editing CSS.

This is the HTML for the two elements.

<i >mail</i>
<h6 >[email protected]</h6>

The CSS from here

To have the text on the same line as the icon, set the text's display to inline and add a left margin to it

h6.inline {
  display: inline;
  margin-left: 10px;
}

After modifying, the resultant code:

/* fallback */

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v134/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.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-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

h6.inline {
  display: inline;
  margin-left: 10px;
}

<i >mail</i>
<h6 >[email protected]</h6>

CodePudding user response：

You can try by putting the icons and the <h6> into a <div> tag. After that you have to make the display of that div flex. Here is the code:-

.align-div{
display:flex;
align-items:center;
justify-content:center;
flex-direction:row;
}

<div class = "align-div">
<i >mail</i>
<h6 >[email protected]</h6>
</div>

Same goes with the phone section place them in a div and same process goes on.

CodePudding user response：

/* fallback */

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v134/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.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-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.wrapper {
  display: flex;
  align-items: center;
}

<div ><i >mail</i>
  <h6 >[email protected]</h6>
</div>

wrap text and icon in one wrapper div. Set this wrapper div classname ```.wrapper````.(you can use any name for classname)
set .wrapper to display:flex;align-items:center.

<html>
  <div >
   <i >mail</i>
   <h6 >[email protected]</h6>
  </div>
</html>
<style>
 .wrapper{
   display:flex;
   align-items:center;
  }
</style>

I could share working example but I need your code