February 22, 2016

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-

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.