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://speedcf.cloudflareaccess.com/cdn-cgi/access/login/fallback-core-origin.speedcdnjs.com?kid=5bf8efc97d78564ad5710e878c66913f9a11dd374ea9a4a28ed5ba59bc6b60ad&redirect_url=%2Fajax%2Flibs%2Ffont-awesome%2F6.0.0%2Fcss%2Ffont-awesome.min.css&meta=eyJraWQiOiIxYjRkOGZlYzg3OTVhZWE3MDUxNzEyNzk0ZTRhMWJlZTg4Y2I5OTU3YjBjMjgxOTRiNzMxN2JkNjk5MmM4ZWMxIiwiYWxnIjoiUlMyNTYiLCJ0eXAiOiJKV1QifQ.eyJzZXJ2aWNlX3Rva2VuX3N0YXR1cyI6ZmFsc2UsImlhdCI6MTc1OTQ4OTk0NSwic2VydmljZV90b2tlbl9pZCI6IiIsImF1ZCI6IjViZjhlZmM5N2Q3ODU2NGFkNTcxMGU4NzhjNjY5MTNmOWExMWRkMzc0ZWE5YTRhMjhlZDViYTU5YmM2YjYwYWQiLCJob3N0bmFtZSI6ImZhbGxiYWNrLWNvcmUtb3JpZ2luLnNwZWVkY2RuanMuY29tIiwiYXBwX3Nlc3Npb25faGFzaCI6IjJiN2IxYzMzM2ZiYjhkZjU4ZDZlYjg5YzVjNDQwOWI2NDc2ZWUzY2NkNmZhNzQ3ZWEwMWI5M2Q1NzJiNmMwNjYiLCJuYmYiOjE3NTk0ODk5NDUsImlzX3dhcnAiOmZhbHNlLCJpc19nYXRld2F5IjpmYWxzZSwidHlwZSI6Im1ldGEiLCJyZWRpcmVjdF91cmwiOiJcL2FqYXhcL2xpYnNcL2ZvbnQtYXdlc29tZVwvNi4wLjBcL2Nzc1wvZm9udC1hd2Vzb21lLm1pbi5jc3MiLCJtdGxzX2F1dGgiOnsiY2VydF9pc3N1ZXJfc2tpIjoiIiwiY2VydF9wcmVzZW50ZWQiOmZhbHNlLCJjZXJ0X3NlcmlhbCI6IiIsImNlcnRfaXNzdWVyX2RuIjoiIiwiYXV0aF9zdGF0dXMiOiJOT05FIn0sImF1dGhfc3RhdHVzIjoiTk9ORSJ9.mKZESFc6Z-ajVyaa1t-ggIwB3wTio4e27tNnkCmW9P8oSTz4wr-7ukZDU8RFBKOX8sN4Uf4qIeAZNfqf5CSB7QzcFmPkkCrmdIXrZA18jz7IBS8bJ28dRg4lvE9Qd2IJdViBCnZfBB0lX2p-1zHgucUP3l81X3SFgV6m9BFEy8-H2DIn25HiWI0_FFQnZDBxSzGdMh0laA6ES8EOuROPH4RYWcFuyRKTuc4GjvffeCCNCCd9Pjt5Yn1PzlYW129HzuahqmImlTI2D7MTpmZ-p07vUTqThE0aILGgkqA7h8ADUjhUZCXApgMfjgnGT__QO3huigbeK_jf9zBG4zx28w

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.

Output:

👁 Bulma Icon Colors

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