Icons in different sizes with Bootstrap

Question

Hi, I’m studying the Bootstrap building a website Opencart where the layout has standard icons.

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

.fa {
    font-size: 14px;
}

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

How do I do this?

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

Answer 1

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

Behold here the icons of Bootstrap.

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 said in the comment:

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

In the fontawesome (which has much more icons than bootstrap, but vc 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 doesn’t work to put the style="font-size: 40px" within the tag <i>, but if you put a size like span and still the 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, don’t forget to import the FA library if you’re going to use it:

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

Or do the download, and import locally.

(I edited the answer again to include the suggestion of how to use CSS to change the size, because now with the help of this Soen response worked (but don’t use span if you have Bootstrap 3.0, use <i>, see above the fiddle)).