I've tried a few variations of CSS star ratings via different methods, and am trying to implement the following via FontAwesome rather than using a sprite. I want to be able to include half stars ideally, but this is where the example below is failing. This is what I've tried so far. I can't get the half / partial star to work correctly here. Any pointers greatly appreciated!
.score {
display: block;
font-size: 16px;
position: relative;
overflow: hidden;
}
.score-wrap {
display: inline-block;
position: relative;
overflow: hidden;
height: 19px;
}
.score .stars-active {
color: #EEBD01;
position: relative;
z-index: 10;
display: inline-block;
}
.score .stars-inactive {
color: grey;
position: absolute;
top: 0;
left: 0;
-webkit-text-stroke: initial;
overflow: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:88%">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</span>
<span class="stars-inactive">
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</span>
</div>
</span>
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:50%">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</span>
<span class="stars-inactive">
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</span>
</div>
</span>
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:100%">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</span>
<span class="stars-inactive">
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</span>
</div>
</span>
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:0%">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</span>
<span class="stars-inactive">
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</span>
</div>
</span>
The overflow:hidden needs to be on 'stars-active' (the sized element) instead of 'score-wrap' (which never overflows.) You can use white-space: nowrap to prevent the stars from wrapping to the next line within the hidden-overflow container.
.score {
display: block;
font-size: 16px;
position: relative;
overflow: hidden;
}
.score-wrap {
display: inline-block;
position: relative;
height: 19px;
}
.score .stars-active {
color: #EEBD01;
position: relative;
z-index: 10;
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
.score .stars-inactive {
color: grey;
position: absolute;
top: 0;
left: 0;
-webkit-text-stroke: initial;
/* overflow: hidden; */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:88%">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</span>
<span class="stars-inactive">
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</span>
</div>
</span>
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:50%">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</span>
<span class="stars-inactive">
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</span>
</div>
</span>
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:100%">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</span>
<span class="stars-inactive">
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</span>
</div>
</span>
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:0%">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</span>
<span class="stars-inactive">
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</span>
</div>
</span>
I found this solution by Paales here: https://github.com/FortAwesome/Font-Awesome/issues/717
I think it's an elegant solution. It looks comparable to your code because the full stars overlap the empty stars and by using overflow: hidden and position: absolute. Now you can set the width of the full stars and show partly filled stars. If you want to show half stars you could change the width of the absolute positioned element with 10% increments.
.rating-box {
position:relative;
vertical-align: middle;
font-size: 3em;
font-family: FontAwesome;
display:inline-block;
color: #F68127;
}
.rating-box:before{
content: "\f006 \f006 \f006 \f006 \f006";
}
.rating-box .rating {
position: absolute;
left:0;
top:0;
white-space:nowrap;
overflow:hidden;
color: #F68127;
}
.rating-box .rating:before {
content: "\f005 \f005 \f005 \f005 \f005";
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="rating-box">
<div class="rating" style="width:30%;"></div>
</div>
PS: Daniel Beck already gave you the answer about the mistake you made regarding white-space: no-wrap, so I suggest accepting that answer. I just wanted to share this solution because I think it is a very nice alternate approach.
below is the Font Awesome 5 version of #Rob's answer above:
We can use font-family: "Font Awesome 5 Free"; font-weight: xxx; to switch between solid and outline
You can play around with the code at the following link.
/* rating box with fontawesome 5 inspired from - https://stackoverflow.com/a/49343426/6908282*/
.rating-box {
position: relative;
vertical-align: middle;
font-size: 3em; /* comment/edit this to change size */
font-family: FontAwesome;
display: inline-block;
color: #F68127;
}
.rating-box:before {
font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "\f005 \f005 \f005 \f005 \f005";
}
.rating-box .rating {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: #F68127;
}
.rating-box .rating:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f005 \f005 \f005 \f005 \f005";
}
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<div class="rating-box">
<div class="rating" style="width:52%;"></div>
</div>
I find myself doing with two sets of stars styles solid and regular. Solid set declared first to have higher z-index and overlapped Regular sets of stars controlled by hidden, nowrap and width.
.stars-rating {
position: relative;
display: inline-block;
}
.stars-rating .stars-score {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 20%;
white-space: nowrap;
}
<div class="stars-rating">
<div class="stars-score" style="width: 20%">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div class="stars-scale">
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</div>
</div>
For future reference, FontAwesome have added half stars to their arsenal. Make sure to include <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> in the <head> section of your page, and then the following will give you the basic structure.
<span class="score">
<div class="score-wrap">
<span class="stars-active" style="width:88%">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-half" aria-hidden="true"></i>
</span>
</span>
</div>
If you want the stars to appear bigger, edit fa fa-star to be fa fa-star 3x where 3x indicates the size, so 3x, 4x, 5x etc. If you would like a different style of star, use fa-star-o. The default colour is black, so if you would like to change the colour you can either edit it via CSS or add the colour to the class, i.e class="fa-star-o bg-light"
This is very nice, thanks for sharing.
I made the same tweak as Faraz, switching to
<i class="fas fa-star" aria-hidden="true"></i>
in the stars-active span, and
<i class="far fa-star" aria-hidden="true"></i>
in stars-inactive,
as it bothered me that stars above the rating % didn't show.
★★★⯪☆
Just use Unicode characters and then use https://www.babelstone.co.uk/Fonts/Shapes.html font as it has ⯪ (STAR WITH LEFT HALF BLACK)
★★★⯪☆
Given the characters (glyphs) above, lets say that ⯪ is rendered as ▯ or some other character that denotes that the glyph is missing from the font. The way you fix this is that you copy ⯪ (missing glyph) and then
in google type
Unicode ⯪
(you paste the glyph you are looking for).
From the results you find https://unicode-table.com/en/2BEA/ that says that the character is called "Star with Left Half Black" and that the code is U+2BEA.
Next you take the 2BEA portion of U+2BEA and paste it into the URL below between /char/ and /fontsupport.htm
https://www.fileformat.info/info/unicode/char/2BEA/fontsupport.htm
The URL for your missing character lists all the fonts that contain that character. Now you can click "view" next to each font listed and find the one you like best.
If you find multiple that you like equally well, you can download all of them and then pick the smallest one.
You want to have a .ttf, .woff, and .woff2 version of the font you choose and then you can use it in CSS as follows:
#font-face {
font-family: 'BabelStoneShapes';
src: url('/fonts/BabelStoneShapes.woff2')format('woff2'), /* Smallest file, if your browser can use this, it will stop here and not download the rest */
url('/fonts/BabelStoneShapes.woff')format('woff'), /* A larger file, if your browser does not understand woff2 */
url('/fonts/BabelStoneShapes.ttf')format('truetype');/* The largest of the three */
font-weight: normal;
font-style: normal;
font-display: block;
}
div.rating {
font-family: BabelStoneShapes;
}
and then use it in HTML as follows:
<div class="rating">★★★⯪☆</div>
Obviously, if Stack Overflow wanted to, they could make their website support virtually all Unicode fonts by using Symbola and updating it each time a new version came out. But they probably never will so in this "Answer" you won't see the half star, but if you follow the example, you will.
Related
I'm trying to achieve the same effect as in the picture attached below using font-awsome layers and css. I can achieve everything but the gradient. Is it possible without using any extra graphics?
My code so far:
<script src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<span class="fa-layers fa-fw fa-7x">
<i class="far fa-circle progress-circle" ></i>
<i class="far fa-circle progress-circle-small" data-fa-transform="shrink-8" style="color: white;"></i>
<i class="fas fa-sync-alt progress-circle-small" data-fa-transform="shrink-12" style="color: white;"></i>
</span>
You can add it using a pseudo element like below
.custom {
position: relative;
z-index: 0;
}
.custom:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
width:1em;
margin:auto;
border-radius: 50%;
background: linear-gradient(to right, blue, red);
transform:scale(0.9);
}
<script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<span class="fa-layers fa-fw fa-7x custom">
<i class="far fa-circle progress-circle" ></i>
<i class="far fa-circle progress-circle-small" data-fa-transform="shrink-8" style="color: white;"></i>
<i class="fas fa-sync-alt progress-circle-small" data-fa-transform="shrink-12" style="color: white;"></i>
</span>
<span class="fa-layers fa-fw fa-4x custom">
<i class="far fa-circle progress-circle" ></i>
<i class="far fa-circle progress-circle-small" data-fa-transform="shrink-8" style="color: white;"></i>
<i class="fas fa-sync-alt progress-circle-small" data-fa-transform="shrink-12" style="color: white;"></i>
</span>
<span class="fa-layers fa-fw fa-2x custom">
<i class="far fa-circle progress-circle" ></i>
<i class="far fa-circle progress-circle-small" data-fa-transform="shrink-8" style="color: white;"></i>
<i class="fas fa-sync-alt progress-circle-small" data-fa-transform="shrink-12" style="color: white;"></i>
</span>
I want to display some icons from font-awesome for a rating system.
At this point I just want to display the result but I didn't find how to colour only half of the star icon.
For instance, if the rate is 3.5 I would display 3 yellow stars, 1 half star in yellow and the rest in grey.
Is there a way to do it with reactjs Font-aweosome component (
import FontAwesome from 'react-fontawesome';)?
It is not possible to color half of the fontawesome icons but you can try using this technique.
.header_star{
float: left;
margin-left: 10px;
position: relative;
}
.header_star .fa.fa-star{
font-size: 20px;
}
.header_star:hover {
text-decoration: none;
}
.header_star .star_hover .fa.fa-star {
color: #ffd200;
}
.star_hover {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
white-space: nowrap;
width: 0;
transition: all 0.3s linear 0s;
}
.header_star:hover .star_hover {
width: 92%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="header_star">
<a href="#" class="header_star">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<div class="star_hover">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
</a>
</div>
I am trying to implement similar to the one in the attachment.
Below is my code. i get the envelope icon but dont know how to get the expected result by placing another icon.
<i class="fa fa-envelope-o" aria-hidden="true"></i>
Thanks
.wrap{
display: inline-block;
position: relative;
}
.wrap > .fa-commenting-o{
position: absolute;
top: -3px;
left: 10px;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'/>
<div class="wrap">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
</div>
Do you want like this?
Try this:
.text-danger {
color: #d9534f;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'/>
<div class="container">
<span class="fa-stack fa-lg" aria-hidden="true">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
</div>
Place your <i></i>s in a span like: Check Fontawesome examples
<span class="fa-stack fa-lg">
<i class="fa fa-envelope-o fa-stack-2x"></i><!--Make background icon large-->
<i class="fa fa-commenting-o fa-stack-1x"></i><!--make foreground icon smaller-->
</span>
Let me know how it works for you.
Have fun
You can overlap icons using CSS property. Try this
<span class="fa-stack fa-lg">
<i class="fa fa-envelope-o fa-stack-2x"></i>
<i class="fa fa-commenting fa-stack-2x" style="padding-left:22px;margin-top:-16px;z-index:232"></i>
</span>
check it on fiddle here
I want to create star rating by CSS. When user will hover last star, all stars before that star must have another color, e.g.: I will hover minStar3, then minStar1,minStar2 and minStar3 must have different color.
<i id="minStar1" class="fa fa-star fa-lg" aria-hidden="true"></i>
<i id="minStar2" class="fa fa-star fa-lg" aria-hidden="true"></i>
<i id="minStar3" class="fa fa-star fa-lg" aria-hidden="true"></i>
<i id="minStar4" class="fa fa-star fa-lg" aria-hidden="true"></i>
<i id="minStar5" class="fa fa-star fa-lg" aria-hidden="true"></i>
You could create this with Flexbox and change order of elements with flex-direction: row-reverse. You can also use ~ general sibling selector to select all sibling elements that come after hovered element .
.rating {
display: inline-flex;
flex-direction: row-reverse;
}
i {
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid black;
transition: all 0.3s ease-in;
}
i:hover ~ i,
i:hover {
background: black;
}
<div class="rating">
<i id="minStar1" class="fa fa-star fa-lg" aria-hidden="true"></i>
<i id="minStar2" class="fa fa-star fa-lg" aria-hidden="true"></i>
<i id="minStar3" class="fa fa-star fa-lg" aria-hidden="true"></i>
<i id="minStar4" class="fa fa-star fa-lg" aria-hidden="true"></i>
<i id="minStar5" class="fa fa-star fa-lg" aria-hidden="true"></i>
</div>
I have seen this trick before here on SO, but can't find it back.
To do so, invert the order of the stars.
Wrap them in an element (like a p or a div)
Give that wrapper direction: rtl.
By inverting the direction, the ~ sibling selector can be used.
i {
display: inline-block;
width: 50px;
height: 50px;
background: green;
}
p {
text-align: left;
direction: rtl;
}
p>i:hover,
p>i:hover~i {
background: red;
}
<p>
<i id="minStar5" class="fa fa-star fa-lg" aria-hidden="true">5</i>
<i id="minStar4" class="fa fa-star fa-lg" aria-hidden="true">4</i>
<i id="minStar3" class="fa fa-star fa-lg" aria-hidden="true">3</i>
<i id="minStar2" class="fa fa-star fa-lg" aria-hidden="true">2</i>
<i id="minStar1" class="fa fa-star fa-lg" aria-hidden="true">1</i>
</p>
How can I overlay a number between 0 and 99 in the middle of 'icon-star-empty'?
Simply do this from the Font Awesome docs on Stacked Icons:
<span class="fa-stack fa-lg">
<i class="fa fa-star-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">1</i>
</span>
Here is what I use for counter overlays (badges) with FontAwesome (FA) 5.1. Unlike using the new fa-layers method, this does not require SVG+JS. Simply add a data-count attribute to <i> markup...
CSS
.fas[data-count]{
position:relative;
}
.fas[data-count]:after{
position: absolute;
right: -0.75em;
top: -.75em;
content: attr(data-count);
padding: .5em;
border-radius: 10em;
line-height: .9em;
color: white;
background: rgba(255,0,0,.75);
text-align: center;
min-width: 2em;
font: bold .4em sans-serif;
}
Markup
<i class="fas fa-envelope" data-count="8"></i>
<i class="fas fa-address-book fa-lg" data-count="16"></i>
<i class="fas fa-bookmark fa-2x" data-count="4"></i>
<i class="fas fa-angry fa-3x" data-count="32"></i>
<i class="fas fa-bell fa-4x" data-count="2"></i>
Example
Conclusion
Some FA icon sizes may require badge size/position tweaking, but works well for my purposes. All colors/positions can be adjusted for calendar overlays, text labels, or OP's star outline.
Note
Untested, but using the same CSS should work with older FA versions by changing fas class to fa instead.
This can also be done using Font Awesome Layers using version 5.0
<div class="fa-4x">
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-circle" style="color:Tomato"></i>
<i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-bookmark"></i>
<i class="fa-inverse fas fa-heart" data-fa-transform="shrink-10 up-2" style="color:Tomato"></i>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-play" data-fa-transform="rotate--90 grow-2"></i>
<i class="fas fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"></i>
<i class="fas fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i>
<i class="fas fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-4"></i>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-calendar"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-certificate"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-envelope"></i>
<span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>
</div>
You css should look something like:
.contain-i-e-s,.icon-empty-star,.text-i-e-s{
height:100px; width:100px;
}
.contain-i-e-s{
position:relative;
}
.text-i-e-s{
text-align:center; position:absolute;
}
Your HTML might look like:
<div class='contain-i-e-s'>
<i class='icon-empty-star'></i>
<div class='text-i-e-s'>99</div>
</div>