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>

— CoderBryan
fonte

Possível duplicado de Glyphicons Bigger

— Kevin Workman

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