4

Como faço para deixar o ícone alinhado com o texto?

.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>

1 Resposta 1

6

Use vertical-align: middle;.

Nota: uma coisa importante, a propriedade vertical-align só funciona com elementos cujo o valor display seja inline ou inline-block, quando usar float ou block o vertical-align não terá efeito, pois ele é usado para elementos que tenham comportamento "inline".

O seu CSS deve ficar assim:

.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>

1
  • 1
    vlw, obrigado. era isso mesmo 24/01/2017 às 19:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .