How can I change the color of the fa-star symbol from its default yellow to white?

When I set color:white; or use the classes icon-light or icon-white, all font-awesome-icons turn white except for fa-star which stubbornly remains yellow. I've tried various methods to override the CSS, including using !important in inline-styling on the element, but the star stays yellow!

Why is this happening, and how can I make it white?

(I am using font-awesome 3.2.1 to support IE7)

Here is my markup:

<i class="icon-white icon-star" style="color:white;"></i>

Or as shown in the screenshot below:

<i class="icon-light icon-star" style="color:white !important;"></i>

Despite the inline-style rule supposedly overriding other rules, the star remains yellow.

What's interesting is that Chrome's debugger states that the star is white according to "Computed Styles," which clearly isn't the case.

I eventually solved this issue by renaming the class on my <i> to white-star and adding the following to my stylesheet:

.white-star:before{
content:"\f005";
}

To my surprise, the star turned white. While the problem is resolved, I'm still curious about why this solution worked. Any insights would be appreciated.

csscolorsfont-awesomefont-awesome-3.2

Answer №1

The reason why the emoji appears yellow is due to it being a bitmap image. In order to display a vector symbol without color, you must add UNICODE VARIATION SELECTOR-15 at the end of the character. This will prompt the rendering in vector format. For more information on this process, you can visit the following link:

The code for VARIATION SELECTOR-15 is U+FE0E.

Answer №2

After some trial and error, I finally cracked the code. The solution was staring me in the face all along!

I had been trying to change the color of the icon-star by targeting the .icon-star element instead of its pseudo-element .icon-star:before. It turns out that colors set directly on child elements take precedence over inherited styles, which is why using !important didn't work.

The lesson learned here is clear: when styling Font Awesome icons, always apply styles to the pseudo-element, not the parent element!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for changing between two texts within a button when clicked

Seeking a solution for toggling between two different texts inside a button when making an ajax call, with only one text displayed at a time. I'm facing difficulty in targeting the spans within the button specifically. Using 'this' as conte ...

javascriptjqueryhtmlcssajax

I am interested in creating a drop-down menu that opens when clicked, instead of hovering with the mouse, using only CSS and without relying on jquery, javascript,

After creating my own drop down menu, I am looking to make a condition where the list will show after clicking the mouse instead of showing on mouse hover. Is there a CSS property that can achieve this without using jQuery or JS? Here is the source code: ...

phphtmlcss

Calculating the CSS `top` value for a sticky table header without the use of Javascript

Is it possible to dynamically adjust the height of a sticky table header bar in CSS, rather than using JavaScript to compute and apply the height? While I am aware that CSS variables can fix the height at 50px, I would prefer for the height to be determin ...

htmlcss

Command field in Javascript

I've crafted an exquisite search box for my website, but I'm struggling to make it functional and display search results. Below are the Html and CSS files pertaining to this section of my site: .searchbox{ /*setting width of the form eleme ...

javascripthtmlcsssearch

How to Toggle Div Visibility with AngularJS ng-show and ng-click

In order to eliminate error messages, I decided to clear the field with a button click. This approach successfully removed the error in my initial test. <div class="errorPopup" data-ng-click="runner.Name = null" data-ng-show="mainForm.name.$error.pat ...

javascriptjqueryhtmlcssangularjs

What steps should I take to eliminate the gap in my fixed bottom navbar?

I'm looking to revamp my menu layout by aligning the links with the social media icons and home button on the same line. The links are nested inside a div within the main navbar class (streetworn-demos), while the social media icons and homepage butt ...

htmlcss

Safari is truncating the box-shadow of an element enclosed within a button

I'm struggling with a button that has an element inside receiving a box-shadow: button { padding: 0; border: 0; margin: 0; overflow: visible; -webkit-appearance: none; background: white; } .shadow { display: inline-block; vertical- ...

csssafaribox-shadow

Update the contents of a different element upon hover using dynamic PHP functionality

Often, solutions involving the use of java script/jquery to achieve a specific behavior require knowing the exact id of the element. However, in dynamic situations where the id is not always known, it can pose a challenge. In my case, I'm generating a ...

phpjqueryhtmlcsshover

Images refusing to display within the div

I am attempting to insert an image onto my website, however, I am encountering issues with the code I have written: div#planet { z-index: -10; width: 450px; height: 549px; position: absolute; background: url("https://example.com/im ...

htmlcss

Tips for allowing a position:absolute <div> to expand as though it were containing a lengthy <p>innerText

This div automatically adjusts its width to fit the content inside, even if it extends beyond the page boundaries. Is there a way to make this div expand to fill the entire width of the page without needing a paragraph? <div style="position:absolute;le ...

htmlcsswidthcss-position

Unable to obtain the width of images on Chrome browser

I've been developing a basic slider that moves images from right to left. It's functioning properly on Firefox, but I'm encountering an issue with Chrome when trying to obtain the width of the images. $(window).load(function() { // Loa ...

javascriptjqueryhtmlcssgoogle-chrome

Exploring the div's classes using SCSS

I recently started learning SCSS. I apologize if this question has been asked before, but I couldn't find the exact solution I was looking for. In one of my .erb views, classes are dynamically assigned to a specific div. Here's an example: < ...

csssass

Issue with stretched links in Bootstrap 5 specifically affecting certain recurring elements on mobile devices

I am facing an issue with a table that has a few hundred rows generated by a recurring PHP script. Utilizing Bootstrap 5, I am using a stretched link to enable the entire row of the table to be clickable. The functionality works perfectly on desktop and ev ...

htmlcssbootstrap-5mobile-browser

Left-align elements within a div container that is centered

I want to left-align my elements within a div container that is centered. I used the text-align property to center the overall div, but now I'm having trouble aligning another content container's text to the left within the center-aligned div. H ...

htmlcss

The inner div is too big for the outer div to contain

I am facing an issue with three div elements, where the first (content) contains two nested div elements. While in Chrome, the last two div elements fit perfectly inside the first div, in MS Edge, the last div does not and starts after the first div on th ...

htmlcssbootstrap-4

The inclusion of float: left disrupts the formatting of the list

My webpage features a visual element known as a "plan", which consists of a small table and an image. I want these two elements to appear side by side without any styling. Currently, they are displayed one below the other. You can view how it looks like he ...

htmlcsscss-float

Issues arise with the functionalities of FireFox related to transformations and transitions

I've been working on my CSS and here is what I have: img.buttonImg { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: ...

cssfirefox

Learn how to integrate Bootstrap with Vue.js TreeView in this tutorial

If you're looking to create a treeview using Vue.js, the code structure would resemble something like this: HTML: <!-- item template --> <script type="text/x-template" id="item-template"> <li> <div ...

javascriptcsstwitter-bootstrapvue.jstreeview

What is the best method for incorporating an Angular Component within a CSS grid layout?

I recently started learning Angular and am currently working on a project that requires the use of a CSS grid layout. However, I'm facing an issue with inserting a component inside a grid area specified by grid-area. My attempt to achieve this in app ...

cssangulartypescriptcss-grid

What is the method for inserting a gap between Bootstrap card components?

Can someone help me figure out how to add space between the two card decks using Bootstrap 4 alpha 6? I've tried using mt-20 on the second card deck but it's not working. I also attempted to wrap them in rows, but that didn't work either: h ...

csstwitter-bootstrapbootstrap-4