Align icon with text vertically

Question

Align icon with text vertically

Navigation

#1 by (4 votes)

3

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>

css

asked by anonymous 24.01.2017 / 20:03

1 answer

How to join with more than two lists? jquery Intellisense does not work in VS2015 Community

score 4 · Accepted 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>