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" >w3wiki</ 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