Bulma Tabs Icons

Last Updated : 24 Jan, 2022

Bulma is a modern CSS framework built on flexbox. It comes with pre-styled components and elements that let you create beautiful and responsive websites fast.

In this article, we will be seeing how to add icons to the tabs in Bulma. To add icons to the tabs, you just have to add an icon container containing the icon inside the <a> tag. You can use any Font awesome icon with class fas.

Bulma tabs icons classes:

fa-image: It is used to set the font-awesome image icon.
fa-music: It is used to set the font-awesome music icon.
fa-film: It is used to set the font-awesome video icon.
fa-file-art: It is used to set the font-awesome document icon.

Syntax:

<div class="tabs">
     <span class="icon">
         <i class="fas fa-film"></i>
     </span>       
</div>

Example: The below example illustrates how to use tab icons in Bulma. To align the tabs, we have used the is-centered class. Various sizes are available for choosing the size as we have used the is-small class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Tab Icons</title> 
    <link rel='stylesheet' 
          href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
    <link rel="stylesheet" 
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" /> 
  
    <style> 
        .container>.tabs{ 
            margin-top: 25px; 
        } 
    </style> 
</head> 
  
<body class="has-text-centered"> 
    <h1 class="is-size-2 has-text-success"> 
      GeeksforGeeks 
    </h1> 
    <b>Bulma Tab Icons</b> 
    <div class="container"> 
        <div class="tabs is-centered"> 
            <ul> 
                <li class="is-active"> 
                    <a> 
                        <span class="icon is-small"> 
                            <i class="fas fa-home"></i> 
                        </span> 
                        <span>Home</span> 
                    </a> 
                </li> 
                <li> 
                    <a> 
                        <span class="icon is-small"> 
                           <i class="fas fa-film"></i> 
                        </span> 
                        <span>Videos</span> 
                    </a> 
                </li> 
                <li> 
                    <a> 
                        <span class="icon is-small"> 
                             <i class="fas fa-camera"></i> 
                        </span> 
                        <span>Pictures</span> 
                    </a> 
                </li> 
            </ul> 
        </div> 
    </div> 
</body> 
  
</html>