Como faço para aumentar os glifos? (Alterar tamanho?)

239

Gostaria de aumentar o glifo do globo para cobrir uma grande parte da página (é uma imagem vetorial). Não está em um botão nem nada; está só sozinho. Existe uma maneira de fazer isso?

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe"></span>
</div>
html css twitter-bootstrap glyphicons CoderBryan
fonte
Possível duplicado de Glyphicons Bigger
Kevin Workman

Respostas:

367

Aumente o tamanho da fonte glyphiconpara aumentar o tamanho de todos os ícones.

.glyphicon {
    font-size: 50px;
}

Para segmentar apenas um ícone, 

.glyphicon.glyphicon-globe {
    font-size: 75px;
}
VenomVendor
fonte
2
Isso funcionou! (Aceito em 5 minutos (esse é o tempo restante)) Existe uma maneira de centralizá-lo? @VenomVendor
CoderBryan
2
text-centerno div.
Aibrean
7
para aumentar o glifo "sob demanda", use .glyphicon.larger {tamanho da fonte: 150%; }
user216661
Que tal torná-lo mais fino?
Nofel 02/02
Eu tive que adicionar !important;ao tamanho da fonte para substituir o CSS do boostrap.
WhileInHell
143

O Fontawesome tem uma solução perfeita para isso.

Eu implementei o mesmo. apenas no seu arquivo .css principal, adicione este

.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}

No seu exemplo, você apenas precisa fazer isso.

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe gi-5x"></span>
</div>
Sr. Crowley
fonte
Agradável! Você também pode usar valores fracionários como 1.5em.
Mike Taverne
Muito melhor que a resposta aceita e mostra uma solução genérica para um problema recorrente.
6177 Adam
71

Se você estiver usando o bootstrap e o font-awesome, é fácil, não há necessidade de escrever uma única linha de novo código, basta adicionar o fa-Nx, do tamanho que você quiser, veja a demonstração

<span class="glyphicon glyphicon-globe"></span>
<span class="glyphicon glyphicon-globe fa-lg"></span>
<span class="glyphicon glyphicon-globe fa-2x"></span>
<span class="glyphicon glyphicon-globe fa-3x"></span>
<span class="glyphicon glyphicon-globe fa-4x"></span>
<span class="glyphicon glyphicon-globe fa-5x"></span>
Ali Adravi
fonte
Glyphicons e Font-Awesome juntam forças!
Timo
Não sou a favor de combinar FA e Glyphicons. Veja abaixo a resposta sobre como aumentar o tamanho do glyphicon usando o estilo embutido ou através de uma classe css acima. Ou para um uso puro solução FA -> fa fa-fa globo-2x (v4.x)
MarcoZen
MarcoZen: enfim, na próxima versão do bootstrap 4 Glyphicons serão removidos, muitos de nós anteriormente estávamos usando juntos.
Ali Adravi
17

Sim, e basicamente você também pode usar o estilo embutido: 

<span style="font-size: 15px" class="glyphicon glyphicon-cog"></span>
Terje Solem
fonte
11

tente usar o cabeçalho, não precisa de css extra

<h1 class="glyphicon glyphicon-plus"></h1>
Bagus Cahyono
fonte
2
Você pode fazer isso, mas não fornece um bom nível de controle, como faria um pouco de CSS.
MattD
6
O uso de cabeçalhos devido ao efeito no tamanho da fonte é um anti-padrão. Um usuário que navegasse em seu site pelo teclado seria enviado diretamente ao seu ícone, pois o leitor de tela supõe que significa um título / cabeçalho para o conteúdo mais importante da página.
24415 Roy
9

Por exemplo, adicione classe:

btn-lg - GRANDE

btn-sm - PEQUENO

btn-xs - Muito pequeno

<button type=button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default">
<span class="glyphicon glyphicon-star" aria-hidden=true></span>Star
</button>

 <button type=button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button>

Ref link Bootstrap: Glyphicons Bootstrap

OpenWebWar
fonte
7
A questão considerava as imagens, não as imagens como botões.
precisa saber é o seguinte
0

Eu usei classes de cabeçalho de inicialização ("h1", "h2" etc.) para isso. Dessa forma, você obtém todos os benefícios de estilo sem usar as tags reais. Aqui está um exemplo:

<div class="h3"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span></div>

Alex Kozlov
fonte