Bootstrap change icon size and color


Bootstrap change icon size and color : Sometimes we need to change the color and size of icons in twitter bootstrap. You can change the icon color by overriding the default css or you can add your own css. Here in this tutorial we are going to explain how to change the icon color and size in twitter bootstrap with example and demo.


Bootstrap change icon size and color

Here is an example to change the default icon color and size to the custom color as below-

Bootstrap change icon default color:

.mycolor{
color:blue !important;
}

Try it »

Now add this css to the icon. Thus you can add your own color to the bootstrap icons.

If you run the above example it produce the following output-

Bootstrap change icon color

Note : Please do not modify the core css because it will not work in future if you upgrade the bootstrap to latest version.

More Examples

Let’s have look over more example and demo here.

Bootstrap change icon size

Here is an example to change the default icon size to the customized size –

Bootstrap change icon size:

.mysize{
color:blue !important;
font-size:100px !important;
}

Try it »

Now add this css to the icon. This will change the icon size to the given size.

If you run the above example it will produce output like this –

Bootstrap change icon size


Advertisements

Add Comment

📖 Read More