Skip to content
Related Articles

Related Articles

Bulma Icon Colors

Improve Article
Save Article
Like Article
  • Last Updated : 20 Jan, 2022

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=
    <link rel="stylesheet"
          href=
</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:

Bulma Icon Colors

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!