Bulma Icon Ionicons

Last Updated : 20 Jan, 2022

Bulma is a free and open-source CSS library used to design fast and responsive websites and web applications. Bulma is compatible with all the icon-font libraries out there like Material Design Icons, Font Awesome 5, Font Awesome 4, Ionicons, etc. In this article, we will be seeing how to use Ionicons icon-font library with Bulma.

To use Ionicons, we use the ion-icon element provided by ionicons and set the name attribute to the name of the icon we want to use.

Syntax:

<span class="icon">
   <ion-icon name="arrow-redo-circle-outline"></ion-icon>
</span>

Example: The example below shows how to use ionicons with Bulma.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Ionicons</title> 
    <link rel='stylesheet' href= 
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> 
    <script type="module" src= 
"https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> 
    <script nomodule src= 
"https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> 
</head> 
  
<body class="has-text-centered"> 
    <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1> 
    <b>Bulma Ionicons</b> 
    <div class="container"> 
        <span class="icon has-text-danger"> 
            <ion-icon name="arrow-redo-circle-outline"></ion-icon> 
        </span> 
        <span class="icon has-text-success"> 
            <ion-icon name="accessibility-outline"></ion-icon> 
        </span> 
    </div> 
</body> 
  
</html>