Icons in different sizes with Bootstrap

Question

Icons in different sizes with Bootstrap

Navigation

#1 by (6 votes)

5

Hello, I am studying Bootstrap by setting up an OpenCart site where the layout has default icons.

I made an HTML module for information with 3 icons using Bootstrap, but they follow the CSS size:

.fa {
    font-size: 14px;
}

I want these icons to have a different size, getting bigger. It does not work even using fa-3x . See an example applied below.

How do I do this?

"i class="fa fa-truck fa-3x pull-left fa-border"

css twitter-bootstrap css-font-face

asked by anonymous 09.06.2015 / 18:03

1 answer

How to read integers with Scanner and handle invalid entries Is it possible to change databases in an existing system?

score 6 · Answer 1

As I said in the comment, these icons that you are using are not from Bootstrap, but from the fontawesome .

See here for the Bootstrap icons.

This is the basic way to use the Bootstrap icons:

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

Example:

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

To change the size globally using CSS, do so:

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

Or using classes:

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

I created a fiddle to demonstrate.

It is also possible to change the size using span , as stated in the comment:

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

In fontawesome (which has many more icons than the bootstrap, but you will end up using two libraries), is basically the same thing, with the difference that it already comes with 5 pre-defined sizes: fa - fa-5x . Example:

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

It does not work to put style="font-size: 40px" inside the <i> tag, but if you put a size as span and even fa-2x , it will double the size determined by span .

In the code below, the icon will have size equivalent to 80px:

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

Finally, as @ re22 said, do not forget to import the FA library if you are going to use it:

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

Or download , and import it locally.

(I edited the answer again to include the suggestion of how to use CSS to resize, because now with the help of this response from SOen worked (but do not use span if it is with Bootstrap 3.0, use <i> , see above fiddle)).