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:
Reference: https://bulma.io/documentation/elements/icon/#ionicons
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...