What is the best way to style an icon in CSS?

Question

What is the best way to style an icon in CSS?

I am facing an issue with the following code snippet:

<span class="stars">★★☆☆☆   </span>

My objective is to style the empty stars differently, but I am unsure how to specifically target them.

The following CSS rule does not produce the desired effect:

.glyphicon-glyphicon-star-empty{
    color: gray !important;
}

Similarly, this rule changes the color of all stars, not just the empty ones:

.entry-content span .stars{
    color:gray;
}

Is there a way to only change the color of the borders of the empty stars (the last 3)? I prefer a solution using CSS only, but I am open to using JQuery or JavaScript if necessary. Please note that there will be additional classes involved. The goal is to target all empty stars specifically.

javascript jquery css wordpress icons

Answer 1

Answer №1

To change the color of stars, you can use an absolute positioned pseudo-element (::before). Modify the number of stars by using the data-stars attribute. To color the desired number of stars, utilize jQuery's _.attr() or Element.setAttribute():

$('span').attr('data-stars', '☆☆☆');

.stars {
  position: relative;
}

.stars::before {
  position: absolute;
  right: 0;
  height: 100%;
  color: red;
  content: attr(data-stars);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="stars">★★☆☆☆</span>

Answer 2

To change the color of stars, you can use an absolute positioned pseudo-element (::before). Modify the number of stars by using the data-stars attribute. To color the desired number of stars, utilize jQuery's _.attr() or Element.setAttribute():

$('span').attr('data-stars', '☆☆☆');

.stars {
  position: relative;
}

.stars::before {
  position: absolute;
  right: 0;
  height: 100%;
  color: red;
  content: attr(data-stars);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="stars">★★☆☆☆</span>

Answer 3

Answer №2

It appears that additional classes will be necessary in this situation. Consider utilizing the following:

<span class="icons"><span class=“icon-blue”>★</span>☆</span>

Afterwards, apply the icon-blue class to your CSS file.

Answer 4

It appears that additional classes will be necessary in this situation. Consider utilizing the following:

<span class="icons"><span class=“icon-blue”>★</span>☆</span>

Afterwards, apply the icon-blue class to your CSS file.

What is the best way to style an icon in CSS?

Answer №1

Answer №2

Similar questions

Achieve seamless integration of PHP function execution with Javascript onClick without the need for page

Struggling to figure out the ::before border trim issue

The element type provided is not valid: it should be a string for built-in components or a class/function for composite components. However, an object was received instead. - React Native

Looking for visible elements in WebDriverIO?

PHP ajax handling multiple requests

Comparing ASP.NET Core and Node.js: A Closer Look at Their Similar

Execute a function upon pressing the enter key

Using a jQuery animation to trigger a dialog opening from one element and closing it back into that same element

The transparency level of materials in THREE.js

Identifying duplicate values in an array of objects using JavaScript

The placement of the Vuetify tooltip is incorrectly aligned when located in the footer section

Identifying the server control ID on the master page with the help of jQuery

Synchronizing timers among different elements

Update the class information using jQuery after performing an action and serialize the button's ID for AJAX requests

Aligning two lines next to a radio button using HTML and CSS

Exploring Attachments in ASP.NET Core MVC Views

Items in Bootstrap row are not aligning in the center

Retrieving chosen row data in Angular 6 Material Table

Sending information from a controller to a view in Ruby: a how-to guide

Tips for Avoiding Line Breaks in CSS Divs