Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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=
    <script type="module" src=
    <script nomodule src=
</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:

Bulma Ionicons

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!