Glyphicons maiores

212

Como faço para gerar Glyphicons maiores no twitter bootstrap 3.0 (não no 2.3.x).

Este código tornará meus glifos grandes:

<button type="button" class="btn btn-default btn-lg">
   <span class="glyphicon glyphicon-th-list">
   </span>
</button>

Como posso obter esse tamanho sem usar a classe btn-lg usando apenas uma extensão?

Isso fornece um pequeno glifo:

<span class="glyphicon glyphicon-link"></span>

css twitter-bootstrap twitter-bootstrap-3 glyphicons guiomie
fonte

372

Você pode simplesmente dar ao glyphicon um tamanho de fonte ao seu gosto:

span.glyphicon-link {
    font-size: 1.2em;
}

fonte

ótimo! No meu caso, eu tinha um input-group-btn com um botão, e esse botão era um pouco maior. Então, eu apenas dei "font-size: 95%" para o meu glyphicon e ele foi resolvido.

victorf

41

Aqui está como eu faço:

<span style="font-size:1.5em;" class="glyphicon glyphicon-th-list"></span>

Isso permite que você altere o tamanho em tempo real. Funciona melhor para requisitos ad hoc para alterar o tamanho, em vez de alterar o css e aplicá-lo a todos.

Randy Greencorn
fonte

2

Em geral, os estilos embutidos não são uma boa abordagem. Se você precisar de estilos específicos para algum componente apenas aplicar a nova font-size via sua classe pai

Kaloyan Stamatov

às vezes é um fora e você não pode ser incomodado embora

Matthew Bloqueio

29

A .btn-lgclasse possui o seguinte CSS no Bootstrap 3 ( link ):

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

Se você aplicar o mesmo font-sizee line-heightao seu intervalo (um .glyphicon-linkou um recém-criado, .glyphicons-lgse for usar esse efeito em mais de uma instância), obterá um Glyphicon do mesmo tamanho que o botão grande.

Angelique
fonte

4

adicionar a btn-lgclasse é uma opção muito mais fácil. Boa resposta!

Neel

6

<button class="btn btn-default glyphicon glyphicon-plus fa-2x" type="button">
</button>

<!--fa-2x , fa-3x , fa-4x ... -->
<button class="btn btn-default glyphicon glyphicon-plus fa-3x" type="button">
</button>

Expandir snippet

barış çıracı
fonte

2

No meu caso, eu tinha um input-group-btncom a button, e isso buttonera um pouco maior que o contêiner. Então, eu dei o font-size:95%meu glyphicon e ele foi resolvido.

<div class="input-group">
    <input type="text" class="form-control" id="pesquisarinbox" placeholder="Pesquisar na Caixa de Entrada">
    <div class="input-group-btn">
        <button class="btn btn-default" type="button">
            <span class="glyphicon glyphicon-search" style="font-size:95%;"></span>
        </button>
    </div>  
</div>

victorf
fonte

2

Escreva seu dentro <h1>ou <h2>:

<h1> <span class="glyphicon glyphicon-th-list"></span></h1>

quieto
fonte

0

Se você estiver usando o bootstrap 3, use tag, assim funcionará perfeitamente no Bootstrap 3.
Você pode usar várias tags para definir o tamanho menor.
Código:


Valynk
fonte

Esse é exatamente o oposto da pergunta ... a menos que você substitua os estilos, isso será reduzido. Eu apenas usei essa tag para sua finalidade exata no outro dia.

Richard Barker

Glyphicons maiores

Respostas: