Bulma Icon Text

Last Updated : 03 Feb, 2022

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.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge" /> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" /> 
    <title>Bulma icon text</title> 
    <link
      rel="stylesheet"
      href= 
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
    /> 
    <script src= 
"https://use.fontawesome.com/releases/v5.15.4/js/all.js"> 
    </script> 
  </head> 
  <body> 
    <div class="container content"> 
      <h2 class="has-text-success"> 
        GeeksforGeeks 
      </h2> 
      <h4>Bulma icon text</h4> 
  
      <!-- Single Icon with Text -->
      <div class="icon-text"> 
        <b><p>Single icon:</p></b> 
        <div class="icon"> 
          <i class="fas fa-home"></i> 
        </div> 
        <div>Home</div> 
      </div> 
  
      <!-- Multiple Icons with text -->
      <div class="icon-text"> 
        <b><p>Multiple icons:</p></b> 
        <div class="icon-text"> 
          <div class="icon"> 
            <i class="fab fa-node"></i> 
          </div> 
          <div>Node Js</div> 
          <div class="icon"> 
            <i class="fab fa-html5 has-text-"></i> 
          </div> 
          <div>HTML 5</div> 
          <div class="icon"> 
            <i class="fab fa-css3"></i> 
          </div> 
          <div>CSS 3</div> 
        </div> 
      </div> 
    </div> 
  </body> 
</html> 