5

Olá, estou estudando o Bootstrap montando um site OpenCart onde o layout tem ícones padrões.

Fiz um módulo HTML para informações com 3 ícones usando Bootstrap, mas eles seguem o padrão de tamanho do site (CSS):

.fa {
    font-size: 14px;
}

Quero que este ícones tenham tamanho diferenciado, ficando maiores. Não funciona mesmo usando fa-3x. Veja um exemplo aplicado abaixo.

Como faço isto?

"i class="fa fa-truck fa-3x pull-left fa-border"
2
  • Está importando o Font Awesome no seu código? - Fiddle de exemplo Commented 9/06/2015 às 16:31
  • Estes ícones que vc está usando são do font awesome, os do bootstrap vc chama com glyphicon, e dá pra mudar o tamanho com <span style="fontsize: 18px"><i class="glyphicon glyphicon-tasks" id="outrasv">"</i></span> p.ex. ou pela CSS usando classes etc.
    – gustavox
    Commented 9/06/2015 às 16:33

1 Resposta 1

6

Como disse no comentário, estes ícones que vc está utilizando não são do Bootstrap, e sim do fontawesome.

Veja aqui os ícones do Bootstrap.

Esta é a forma básica de usar os ícones do Bootstrap:

<i class="glyphicon glyphicon-nomedoglyphicon"></i>

Exemplo:

<i class="glyphicon glyphicon-tasks"></i>

Para alterar o tamanho globalmente, utilizando CSS, faça assim:

i.glyphicon {
    font-size: 3em;
}

Ou utilizando classes:

i.glyphicon.minhaclasse {
    font-size: 6em;
}

Criei um fiddle pra demonstrar.

Também é possível alterar o tamanho utilizando span, como disse no comentário:

<span style="fontsize: 18px"><i class="glyphicon glyphicon-tasks"></i></span>

No fontawesome (que tem muito mais ícones que o bootstrap, mas vc acabará utilizando duas bibliotecas), é basicamente a mesma coisa, com a diferença de que ele já vem com 5 tamanhos pré-definidos: fa-fa-5x. Exemplo:

<i class="fa fa-list-alt fa-2x"> Texto vinculado</i>

Não dá certo colocar o style="font-size: 40px" dentro da tag <i>, mas se vc colocar um tamanho como span e ainda o fa-2x, ele dobrará o tamanho determinado pelo span.

No código abaixo, o ícone terá tamanho equivalente a 80px:

 <span style="font-size: 40px"><i class="fa fa-list-alt fa-2x"></i></span>

Por fim, como disse o @re22, não se esqueça de importar a biblioteca do FA se for utilizá-lo:

<link rel="stylesheet"href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Ou faça o download, e importe localmente.

(Editei a resposta de novo pra incluir a sugestão de como usar CSS pra alterar o tamanho, porque agora com a ajuda desta resposta do SOen funcionou (mas não use span se estiver com o Bootstrap 3.0, use <i>, veja acima o fiddle)).

2
  • 1
    Obrigado pela orientação. Vou aplicar no projeto e aprendendo a usar melhor o Bootstrap. Commented 9/06/2015 às 17:42
  • @OmarAlmeida nesta pergunta tem várias respostas que podem ajudar no começo com o Bootstrap.
    – gustavox
    Commented 9/06/2015 às 18:36

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 .