The Essential Guide to Bootstrap Icon Hover Style (3 Examples)

Adding a hover effect to icons in Bootstrap can be accomplished by targeting the hover pseudo-class on icons. We can also use a little JavaScript to dynamically add a Bootstrap utility class on hover. In this tutorial we will explore three methods of applying hover styling to an icon.

Here’s an example of what we will build:

How to Add Hover Styling to a Bootstrap Icon with Class Selector and :hover Pseudo-Class

In this tutorial I will be using font awesome icons. We can add hover styling to an icon (whether or not we are using font awesome) by adding the :hover pseudo-selector to a class that is applied to an icon.

Here is example code:

//HTML
<span className="fa fa-question-circle icon-box"/>

//CSS
.icon-box {
  margin: 1.5rem;
  min-width: 5rem;
  min-height: 5rem;
  padding: .5rem;
  line-height: 5rem;
  font-size: 4rem;
  text-align: center;
  box-sizing: content-box;
}

.icon-box:hover {
  transform: scale(1.1);
  background-color: $warning;
  border-radius: 50%;
  color: $primary;
}

In this example I added the icon-box class to give the icon some size and other styling. I then targeted the icon-box class with a :hover selector. The browser auto-applies the hover pseudo-class when the icon is hovered.

I could also have added the hover selector to the fa class like this:

.fa:hover {
  transform: scale(1.1);
  background-color: $warning;
  border-radius: 50%;
  color: $primary;
}

Since all my font awesome icons use this class, it would apply the hover styling more broadly.

Either class is a good option for adding transform, background-color, border-radius, and text color on icon hover. The image in the intro was created with the code above.

How to Add Hover Styling to a Bootstrap Icon with Element Selector and :hover Pseudo-Class

Instead of applying hover styling by targeting a class and :hover, we can target all icons with an element selector. Here’s an example:

//HTML
<span className="fa fa-plus icon-box" />

//CSS
span:hover {
  transform: scale(1.1);
  background-color: $warning;
  border-radius: 50%;
  color: $primary;
}

This will apply hover styling to all <span> elements. In this tutorial, I am using the fa class to convert the span into a font awesome icon. Targeting all spans with this hover styling risks adding a hover effect to some elements that are not icons and might be too broad.

Here is the effect of this code:

How to Add Hover Styling to a Bootstrap Icon with Conditional Classes

If you can use some JavaScript and a library like React, then you can conditionally add a class to an icon in a Bootstrap project. We can even conditionally add built-in Bootstrap classes that change font-size, line height, and more.

<span
  className={`${hovered ? "display-3 bg-primary rounded-circle border border-success border-3" : ""} fa fa-flag icon-box`}
  onMouseOver={() => setHovered(!hovered)}
  onMouseOut={() => setHovered(!hovered)}
/>

In the code above, we detect mouse over and mouse out events and use those to set a state value named hovered. If hovered is true, we apply several Bootstrap utility classes for border, font size, and color:

• display-3: styles font size and line height
• bg-primary: sets the background color to the value of the Bootstrap $primary variable
• rounded-circle: sets the border radius to 50%
• border: adds a solid 1px border
• border-success: sets the border color to the value of the Bootstrap $success variable (a shade of green by default)
• border-3: set the border to 3px

Here is the hover styling produced by the code above:

All of these classes are available in “vanilla” Bootstrap. I simply used React code to conditionally apply them.

Here’s how to customize the Bootstrap accordion icon, and we can also create Bootstrap icon buttons.