布尔玛图标颜色

Bulma 是一个免费的开源 CSS 框架，可以用作 Bootstrap 的替代品。它带有预构建的组件，例如按钮和图标。在本文中，我们将了解如何在 Bulma 中更改图标颜色。由于我们使用的图标只是文本，我们可以使用文本颜色助手来更改图标的颜色。我们将使用 font awesome 图标包作为图标

Font Awesome Icons： Font-awesome 是一个 Web 图标库，为您提供可缩放的矢量图标，可以根据颜色、大小和更多方面进行自定义。

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

编程需要懂一点英语

颜色助手类：

has-text-white：该类用于将文本的颜色更改为hsl(0, 0%, 100%) 。
has-text-black：该类用于将文本的颜色更改为hsl(0, 0%, 4%) 。
has-text-light：该类用于将文本的颜色更改为hsl(0, 0%, 96%)。
has-text-dark：该类用于将文本的颜色更改为hsl(0, 0%, 21%)。
has-text-primary：该类用于将文本的颜色更改为hsl(171, 100%, 41%)。
has-text-link：该类用于将文本的颜色更改为hsl(217, 71%, 53%)。
has-text-info：该类用于将文本的颜色更改为hsl(204, 86%, 53%)。
has-text-success：该类用于将文本的颜色更改为hsl(141, 71%, 48%)。
has-text-warning：该类用于将文本的颜色更改为hsl(48, 100%, 67%)。
has-text-danger：该类用于将文本的颜色更改为hsl(348, 100%, 61%)。

句法：

示例：下面的示例显示了如何使用文本颜色助手类更改图标颜色。

HTML



  

    Bulma icon Colors
    
    

  

    GeeksforGeeks
    Bulma Icon Colors

输出：

布尔玛图标颜色

参考： https://bulma.io/documentation/elements/icon/#colors