Bulma Icon Colors

Bulma is a free and open-source CSS framework that can be used as an alternative to Bootstrap. It comes with pre-built components like buttons and icons. In this article, we will be seeing how to change Icon colors in Bulma. Since the icons we use are simply text, we can use text color helpers to change the color of the icons. We will use the font awesome icon package for the icons

Font Awesome Icons: Font-awesome is a web icon library that gives you scalable vector icons that can be customized in terms of color, size, and in many more aspects.

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/font-awesome.min.css

Color Helper Classes:

has-text-white: This class is used to change the color of the text to hsl(0, 0%, 100%).
has-text-black: This class is used to change the color of the text to hsl(0, 0%, 4%).
has-text-light: This class is used to change the color of the text to hsl(0, 0%, 96%).
has-text-dark: This class is used to change the color of the text to hsl(0, 0%, 21%).
has-text-primary: This class is used to change the color of the text to hsl(171, 100%, 41%).
has-text-link: This class is used to change the color of the text to hsl(217, 71%, 53%).
has-text-info: This class is used to change the color of the text to hsl(204, 86%, 53%).
has-text-success: This class is used to change the color of the text to hsl(141, 71%, 48%).
has-text-warning: This class is used to change the color of the text to hsl(48, 100%, 67%).
has-text-danger: This class is used to change the color of the text to hsl(348, 100%, 61%).

Syntax:

<span class="icon">
    <i class="fas fa-home"></i>
</span>

Example: The below example shows how to change icon color using text color helper classes.

HTML

<!DOCTYPE html> 

<html> 

<head> 

    <title>Bulma icon Colors</title> 

    <link rel="stylesheet" 

          href= 

"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> 

    <link rel="stylesheet"

          href= 

"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" /> 

</head> 

<body class="has-text-centered"> 

    <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1> 

    <b>Bulma Icon Colors</b> 

    <div class="container" style="margin-top: 30px;"> 

        <span class="icon is-large has-text-danger"> 

            <i class="fas fa-2x fa-home"></i> 

        </span> 

        <span class="icon is-large has-text-success"> 

            <i class="fas fa-2x fa-check-square"></i> 

        </span> 

    </div> 

</body> 

</html>

Output:

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

Article Tags :

CSS

Web Technologies

Bulma

Bulma-Elements