Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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=
    <link rel="stylesheet" 
          href=
  
    <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>

Output:

Bulma Tabs Icons

Bulma Tabs Icons

Reference: https://bulma.io/documentation/components/tabs/#icons


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!