"Utilizing a custom CSS style for a half heart rating system

I am currently working on implementing a rating system using the font-awesome fa-heart class. While I have successfully colored the full heart, I am facing difficulty in filling only the first half of the heart in red. Despite my research efforts, all solutions involve stars instead of half hearts and do not utilize font-awesome.

Unfortunately, I am limited to using font awesome version 4.0.3 and cannot upgrade...

Does anyone know a clever workaround for this issue?

.full {
  color: red;
}
.half {

}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">

<div class="rating-love ">
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart half"></span>  
     <a href="#reviews"><span>23 Review(s)</span></a>
                    </div>

htmlcss

Answer №1

One interesting concept is showcased here, where you have the flexibility to adjust any type of rating by simply modifying a CSS variable:

.rating-love {
  display: inline-grid!important;
}

.rating-love:before,
.rating-love:after {
  content: "\f004  \f004  \f004  \f004  \f004";
  grid-area: 1/1;
}

.rating-love:after {
  white-space: nowrap;
  overflow: hidden;
  width: var(--w);
  color: red;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">

<div class="rating-love fa" style="--w: 50%;"></div>

<br>

<div class="rating-love fa" style="--w: 30%;"></div>

<br>

<div class="rating-love fa" style="--w: 80%;"></div>

Answer №2

You can achieve this effect by using text Clip & Background Gradient technique. By creating a gradient with 2 colors and utilizing clip, you can make an interesting design like splitting a heart in half, for example. Changing the hex code in your CSS will allow you to customize which part of the shape is colored.

.fa-heart.half:before {
    background: -webkit-linear-gradient(180deg,#000 0%, #000 50%,#FF0000 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.full {
  color:red;
}
.half {

}
.fa-heart.half:before {
    background: -webkit-linear-gradient(180deg,#000 0%, #000 50%,#FF0000 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">

<div class="rating-love ">
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart half"></span>  
     <a href="#reviews"><span>23 Review(s)</span></a>
                    </div>

Answer №3

One way to handle this without the use of JavaScript is by reducing the width of the span element by half and hiding any overflow.

.full {
  color: red;
  vertical-align:text-bottom;
}

.half {
  color: red;
  width: 8px;
  overflow: hidden;
  vertical-align:text-bottom;
  margin-right: 8px;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">

<div class="rating-love ">
  <span class="fa fa-heart full"></span>
  <span class="fa fa-heart full"></span>
  <span class="fa fa-heart full"></span>
  <span class="fa fa-heart full"></span>
  <span class="fa fa-heart half"></span>
  <a href="#reviews"><span>23 Review(s)</span></a>
</div>

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

"Efficiently trimming off any text past the final character using

I have a variable in Smarty named {$url} which contains the following URL: $url = https://www.example.com/?parameter=hello:world:itsme I need to remove everything after the last ":" in the URL. The desired output is: $result = https://www.example.com/? ...

phphtmlurlsmarty

Variations in the appearance of scrollbars on the x-axis and y-axis within a single <div> element

Let's say we have a div element like this: <div class="nav-menu"></div> I want to customize the CSS style for scrollbar using the ::scrollbar pseudo-element: .nav-menu::-webkit-scrollbar { width: 8px; background: white; ...

htmlcssscrollbaroverflow

Creating two dropdown menus from a PHP array

Currently, I have a PHP array structured like this. $food = array ("Fruits" => array("apple","mango","orange"), "vegies"=> array ("capsicum", "betroot", "raddish"), "bisucuits"=>array("marygold", "britania", "goodday")); My task is to create two ...

phpjqueryhtmlajax

Extracting Section Titles from INI using PHP

I've spent all night trying to perfect this code with no luck. I'm not even sure what to search for at this point. Here's the situation: I'm using PHP to parse .ini files into an HTML table. This is the code in my html file: <?php ...

phphtmlparsingini

Launch in a new window using JavaScript

Check out my interactive map here. Currently, when I click on different sections of the map, the target page opens in the same window. However, I would like it to open in a new window instead. <iframe src="http://bluewingholidays.com/map/map.html ...

javascriptjqueryhtml

What is the best way to place a floating elastic div on top of an elastic background and ensure that the div stays in place?

Looking for some creative input here. Don't have a specific question in mind, but open to ideas. Just to clarify, I want both the floating div and the background to resize as the window size changes, while keeping the div in the same position on top ...

javascripthtmlcss

The Popover style from React-Bootstrap seems to be missing when applied to my component

Attempting to incorporate a Popover with overlay trigger from React - Bootstrap has proven to be quite the challenge. If you check this image, you'll see what it's supposed to look like. This is the code I used: var {Button, Overlay, OverlayTr ...

csstwitter-bootstrapreact-bootstrapbootstrap-popover

Resetting the width of a CSS-styled div to its default maximum width

I have a set of automatically generated div containers that contain label and data information. For example: <div class="display-label"> @Html.DisplayNameFor(model => model.BusinessPhone) </div> <div class="display-field"> @H ...

htmlcss

Using PHPMailer in conjunction with a textarea form and HTML

Currently, I am attempting to piece together code from a PHP tutorial that demonstrates how to create a basic PHPMailer form for sending plain text emails to a mailing list. The simplicity of the form is ideal as it will be used by only a few individuals. ...

phphtmlformsemailphpmailer

Using canvas to smoothly transition an object from one point to another along a curved path

As a beginner in working with canvas, I am facing a challenge of moving an object from one fixed coordinate to another using an arc. While referring to the code example of a solar system on https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutori ...

javascripthtmlcanvas

Having numerous calls to isNaN within a JavaScript if-else statement

I've created a JavaScript function that generates div elements and styles them based on user input values. However, I'm facing an issue when trying to display a warning message if the input is not a number. Currently, I'm unable to create th ...

javascriptjquerycssif-statement

How can I locate the CSS selector for a text message?

Looking for a CSS selector to target the message "Congratulations! displayed after successfully filling out a registration form with Selenium Web driver. Need to assert the text "Congratulations, Your email has been verified". Here is the HTML code: <d ...

cssseleniumselenium-webdriver

Experiencing an issue with referrer: The global symbol needs an explicit package name

my $refer = $ENV{HTTP_REFERER}; my $gk1 = substr($str1, -4); if ($gk1 = .swf) { my $antigk = "gk detected"; } else { my $antigk = $link; } I am encountering issues with this code after making some modifications. What could be causing the errors? I ...

htmlperl

jQuery code unable to alter the class of a div

Need help with a script on my single page site that adds a "read more" style link to a content area's div. The goal is for the button to change the class of the content area when clicked, showing all of the content. Clicking again should hide the cont ...

javascriptjqueryhtmlcss

Issue with importing a file using JQuery causing the click event to not function properly

I have a file named navigation.html located in a directory called IMPORTS <!-- Navigation --> <div class="navbar-inner"> <div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-ta ...

javascriptjqueryhtml

Change hyperlink text color on Android CheckBox

I am having a CheckBox with two links embedded in the text. The text is set using the following code: String htmlText = "Accept <a href='someUrl'>Terms and Conditions</a> and <a href='anotherUrl'>Privacy Policy&l ...

javaandroidhtmlcssxml

If I dared to eliminate the emphasized line, this code would completely fall apart

<!DOCTYPE html> <html> <head> </head> <body> <h1 id="message-el">Ready to play?</h1> <p id="cards-el"></p> <p id="sum-el"></p> <butto ...

javascripthtmlloopslogic

How can I adjust or eliminate the offset in Bootstrap 3 for smaller devices like tablets and smartphones?

Within the structure of my web app view (created in Rails 5), this is the main div: <nav class="navbar navbar-inverse navbar-fixed-top" > my navigation bar </nav> <div class="col-md-6 col-md-offset-3"> the central content of my web ...

htmlcsstwitter-bootstrap-3responsive-design

Is it possible to generate a unique name from an array without any repeats?

Update: I am not looking to create a single list, but rather a button that generates a random name when clicked. Objective: Generate a random name from an array by clicking a button. The goal is to display one name at a time randomly without repetition. W ...

javascriptjqueryhtmlarraysrandom

Can anyone provide a solution for determining the number of active intervals in Javascript?

Similar Question: How to View All Timeouts and Intervals in JavaScript? I've been working on an HTML5 game that includes a lot of graphical effects using intervals created by the setInterval function. However, I've noticed that my game is ru ...

javascriptperformancehtmlsetinterval