As previously mentioned, Hover has a range of icon effects. Hover leverages the Font Awesome library, to render icons, which Hover then animates. Hover provides a range of different effects, but each effect actually only applies to one icon. All these effects are prefixed with hvr-icon-<effect name>. Open node_modules/hover.css/css/hover-min.css and check out the hvr-icon-bob:before class:

.hvr-icon-bob:before {
  content: "f077";
  position: absolute;
  right: 1em;
  padding: 0 1px;
  font-family: FontAwesome;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

Using the before pseudo-selector, hvr-icon-bob is creating an element with content: f077, which relates to the icon specified by that ID in Font Awesome, as the font-family is set to FontAwesome. Taking a look at FontAwesome.css, we can see that f077 represents the fa-chevron-up class. As you can see, the icon is hard-coded into the class, so we can only ever use hvr-icon-bob with the upward chevron icon, unless we override the content rule of that class. The transform properties with the value of translateZ(0) are used to make the transition smoother, as it creates a new stacking context. The new stacking context forces rendering of the animation to the GPU, creating a smoother transition.

Let's see hvr-icon-bob in action by updating the Profile drop-down button, replacing the caret class with the hvr-icon-bob class. Replace the Profile button markup with the following:

    <a href="#" class="nav-link" data-toggle="dropdown" role="button"
     aria-haspopup="true" aria-expanded="false">
        <span class="hvr-icon-bob">Profile</span>
    </a>

Take a look at the following screenshot:

When a user hovers over the icon, the icon will animate up and down. Great! Well, except that it is upside down and misaligned. Let's fix that. In myphoto.css, we will override the content property of hvr-icon-bob with f078, which is the fa-chevron-down class, and we will vertically align it correctly:

    .hvr-icon-bob :before {
        content: "f078";
    }
    .hvr-icon-bob {
        vertical-align: top;
    }

We also need to ensure that myphoto.css is loaded after Hover:

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css
    /bootstrap.min.css" />
    <link rel="stylesheet" href="node_modules/hover.css/css/hover-
     min.css" />

Take a look at the following screenshot:

That's better! However, this approach can easily become a maintenance nightmare. There are other approaches to managing Hover icon classes, so they're more usable. For instance, we can use specific classes to determine which icon to display. Add the .myphoto-chevron-down selector to the hvr-icon-bob:before rule in myphoto.css:

    .myphoto-chevron-down.hvr-icon-bob:before {
        content: "f078";
    }

Refresh the page, and the upward chevron will be displayed again.

However, if we add the myphoto-chevron-down class to the element, the downward chevron will be rendered:

    <span class="myphoto-chevron-down hvr-icon-bob">Profile</span>

The approach described here makes using the Hover icon animations far more maintainable and adds much more context than just using hvr-icon-bob, which just describes the animation and not the icon. We can also simply use the actual FontAwesome classes to describe the behavior, but Font Awesome also provides display rules that may not be in line with how Hover designed these classes to work.