Bulma Icon Text

Bulma is a free and open-source CSS framework based on Flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. In this article, we will be learning Bulma icon text.

Bulma supports icon elements with texts in span or paragraph elements. For adding text with the icons in the Bulma framework, we can use the icon-text wrapper. The icons can also be inserted between the <p> tag or any paragraph text. 

Bulma Icon text Classes:

• icon-text: This class is used to give a description text of the icon element.

Note: You can combine many icon elements with text elements according to the need,

Syntax:

<div class="icon-text">
 <div class="icon">
 <i class="fas fa-home"></i>
 </div>
 ....
</div>

Below example illustrates the Bulma Icon Text:

Example: The following demonstrates the Bulma icon-text class.

Output:

Reference: https://bulma.io/documentation/elements/icon/#icon-text