Bulma Icon Ionicons

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>

Output:

Reference: https://bulma.io/documentation/elements/icon/#ionicons

Explore