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= <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:
Reference: https://bulma.io/documentation/elements/icon/#ionicons
Please Login to comment...