1. Add some captions for the icon. When the mouse hovers over the icon, the bubble text appears, as shown in the image below.

To add captions for the icon and show bubble text when the mouse hovers over it, you can use HTML and CSS. Here's an example:

HTML code:

<div class="icon-container">
  <i class="fas fa-search"></i>
  <span class="caption">Search</span>
</div>

CSS code:

.icon-container {
  position: relative;
  display: inline-block;
}

.caption {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.icon-container:hover .caption {
  visibility: visible;
  opacity: 1;
}

In the HTML code, we have a container div with a font-awesome search icon and a span element for the caption. In the CSS code, we set the position of the container to relative and the position of the caption to absolute. We use the visibility property to hide the caption by default and show it when the container is hovered over. We use the opacity property to create a fade-in effect and the transition property to control the speed of the animation. The caption is positioned using the bottom and left properties and centered with the help of margin-left.