Using Icon Fonts in Bootstrap Studio

Icon fonts are like normal web fonts, but instead of letters and numbers they contain vector shapes. This makes them very easy to embed and they look great on high resolution screens.

In this tutorial, we will show you how to add and customize icons in Bootstrap Studio. The app supports a number of popular icon font packs which you can just drag and drop into your design.

You can download the complete example as a bsdesign file. Download Example

It is very easy to add icons to your design in Bootstrap Studio. First, you need to go the Components panel and search for the 'Icon' component. Then drag it over the element where you want to place the icon and drop it.

In order to change the icon, you need to double click it. You will see a window with all available icon packs. When you decide which one you want to use, just select it and click 'OK.'

Customizing Icons

One of the greatest advantages of icon fonts is that you can style them with CSS. You can change their size, color and alignment the same way you style regular text.

Icon size

You can set the size of your icons with the font-size property.

.font-icon-example .item i {
  font-size:30px;
}

Color

You can customize your icons' color with the color property.

.font-icon-example .item.home i {
  color:#f87912;
}

.font-icon-example .item.profile i {
  color:#ffcc00;
}

Alignment

You can align your icons left, right and center with the text-align property.

.font-icon-example .item {
  text-align:center;
}

Animations and Transitions

You can also make your icons more eye-catching by adding different types of animations or transitions using the transition property.

.font-icon-example .item {
  transition:0.2s;
}

In this example, we add a transition to the color property of the icon, to make a smooth color change effect with a 0.2 second duration. Once it's defined, every color change triggers the animation:

.font-icon-example .item.profile:hover {
  color:#ffcc00;
}

You can see the entire example in action and test the animations by grabbing the demo from the Download button above. To see the animations, start the browser Preview in the app.

With this our example is ready! With a few icons and a little bit of work you can make your website look more polished and professional.