Align icon with text vertically

By adminPosted on August 27, 2020

Question :

How do I leave the icon in line with the text?

.material-icons {
    width: 24px;
    overflow: hidden;
}
.material-icons.tiny { 
    font-size: 1rem;
    width: 1rem;
    overflow: hidden;
}
.material-icons.small { 
    font-size: 2rem; 
    width: 2rem;
    overflow: hidden;
}
.material-icons.medium { 
    font-size: 4rem; 
    width: 4rem;
    overflow: hidden;
}
.material-icons.large { 
    font-size: 6rem; 
    width: 6rem;
    overflow: hidden;
}
.material-icons.extra-large { 
    font-size: 10rem; 
    width: 10rem;
    overflow: hidden;
}

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<h1><i class="material-icons medium">error</i>Ops...</h1>

Answer :

Use vertical-align: middle; .

Note: One important thing, the vertical-align property only works with elements whose display value is inline or inline-block , when using float or block o vertical-align will have no effect since it is used for elements that have inline behavior.

Your CSS should look like this:

.material-icons {
    width: 24px;
    overflow: hidden;
    vertical-align: middle;
}
.material-icons.tiny { 
    font-size: 1rem;
    width: 1rem;
    overflow: hidden;
}
.material-icons.small { 
    font-size: 2rem; 
    width: 2rem;
    overflow: hidden;
}
.material-icons.medium { 
    font-size: 4rem; 
    width: 4rem;
    overflow: hidden;
}
.material-icons.large { 
    font-size: 6rem; 
    width: 6rem;
    overflow: hidden;
}
.material-icons.extra-large { 
    font-size: 10rem; 
    width: 10rem;
    overflow: hidden;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<h1><i class="material-icons medium">error</i>Ops...</h1>

Leave a Reply Cancel reply