What is the best way to add several icons at once?

Is there a way to insert multiple star icons directly below the review text?

I attempted to use pseudo elements to add the icons, but I could only insert one icon when I actually need to include multiple icons. Here is what I have tried so far:

.review::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900; content: "\f007";
}


.circle {
  background-color: gray;
  border-radius: 100%;
  height: 80px;
  width: 80px;
  position: absolute;
  top: -30px;
  right: 245px;
}

.namedetails {
  font-style: italic;
  margin-bottom: 20px;
}

.review {
  font-family: sans-serif;
  font-size: 15px;
  font-weight: bold;
}

.review::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900; content: "\f007";
}
<div class="circle"></div>
<p class="namedetails">Name Surname</p>
<span class="review">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In dictum non consectetur a. Turpis egestas maecenas pharetra convallis posuere morbi. Mi quis hendrerit dolor magna eget est lorem ipsum. Id aliquet lectus proin nibh nisl condimentum. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor!</span>

I hope to see 5 star icons displayed under the review text.

htmlcss

Answer №1

By utilizing the most recent CDN version of font-awesome, I was able to achieve the desired outcome:

The only adjustment I made to your code snippet was converting the .review span into a paragraph element to create a small space below the text for the stars. If you prefer reduced whitespace, simply switch back to using <span> instead of <p>.

i.far { margin-right: .2rem;}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title> Response from SO </title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
        
        
  </head>

  <body>
    <div class="circle"></div>
    <p class="namedetails">Name Surname</p>
    <p class="review">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In dictum non consectetur a. Turpis egestas maecenas pharetra convallis posuere morbi. Mi quis hendrerit dolor magna eget est lorem ipsum. Id aliquet lectus proin nibh nisl condimentum. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor!</p>

    <span><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></span>
    
  </body>
</html>

Answer №2

It appears that you are utilizing some complimentary Awesome Fonts icon. One method for incorporating icons is by utilizing the <i> tag provided by the same website. To start, you must insert a CDN link inside the <head> tag in your HTML document to reference the JavaScript file from Awesome Fonts:

<head>
   ...
   <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>

You can also explore other methods to include the file in your project on the start page.

Next, place your <i> tag icon within your <span> element.

<span class="review">
   Lorem ipsum dolor sit amet! <i class="fas fa-star"></i> 
</span>

The browser will display it as an SVG element. You can locate the free icon here.

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

Interactive pop-up window featuring conversational chat boxes

Trying to create a comment box within a Modal dialog box that is half of the width. The comments in this box should be read-only and created using div tags. Attempted reducing the width and using col-xs-6, but ending up with columns spanning the entire w ...

javascripthtmlcssfrontend

Google Chrome has trouble displaying the body element at 100% height

Having an issue with Google Chrome – the body element is not reaching 100% height. In my website samples, at 100% zoom when hovering over a menu element (such as "O nás"), I change the background color of the body element. However, in Chrome, the botto ...

htmlcssgoogle-chromeheight

Can javascript be used to swap out the folder in my URL?

I have been searching for solutions on how to change the language of my website using jQuery, but so far I have not found anything that works for me. Let's take my website as an example: www.domain.com I have separate folders for different languages. ...

javascriptjqueryhtml

Arranging React Grid Items with Stylish Overlapping Layout

Is there a way to create a react-grid-layout with 100 grid points width, while ensuring that the grid items do not overlap? (Reducing the number of columns can prevent overlap, but sacrifices the 100-point width resolution for grid placement) import Butto ...

cssreactjstypescriptreact-grid-layout

Obtaining data from HTML tags using Beautifulsoup

Here is the complete HTML code that I am currently working with. Below is a simplified version of the HTML provided above: <table class="premium"> <tr class="retailer top-offer" data-pricer="47.84" saler-id=" ...

pythonhtmlparsingbeautifulsoupextract

Deactivate the dropdown menu without triggering any event

I am working on a JSP page and I need to find a way to disable a dropdown list without using an onclick method or event in the dropdown menu itself. <% boolean condition = true; if(condition){ // Here, I need to access 'plc1' ...

javahtmlscriptlet

Trouble with image size transition not functioning properly

When attempting to enlarge an image with a transition in Chrome, it doesn't seem to be working properly. Here is the HTML code: <img src="foobar.png"> And the CSS code: img { float: left; margin-right ...

csscss-transitions

What happens when a browser can support multiple versions of a font - which one does it choose

If I have two versions of a font, customFont1.woff2 and customFont1.woff, and I list the woff2 version first followed by the woff version in the font declaration file, what happens when the browser supports both formats? Will it download both fonts or ju ...

htmlcssfontsfont-face

While working on creating a game prototype using CSS and Javascript, I encountered an issue where the icons were losing their color when trying to print the document

When I try to print, the icons like ...

javascriptcssprinting

What is the best way to start with maximum padding when in full screen mode, and then gradually decrease to minimum padding as the browser width decreases?

Trying to adjust my padding with the formula padding-left: clamp( 60px, calc( value - value ), 186px) but struggling to resize it correctly as I reduce my browser width ...

htmlcssfrontendweb-frontendclamp

Mobile-responsive iFrame content is designed to adjust and fit appropriately on

While my iframe is responsive on both mobile and website, I am facing an issue where the content overflows (both overflow X and Y) from the width and height of the iFrame. Here's the scenario: in the mobile view (simulated using Google Chrome to mimi ...

javascripthtmlcssiframe

In React, when utilizing the grid system, is there a way to easily align items to the center within a 5 by

I need to center align items within the material-UI grid, with the alignment depending on the number of items. For instance, if there are 5 items, 3 items should be aligned side by side in the center and the remaining 2 items should also be centered. Pleas ...

javascriptcssreactjsmaterial-ui

What could be causing the tooltip to malfunction in jQuery?

The tooltip is not appearing as expected, only the title is displaying in the browser. What can be done to fix this? Below is the code snippet: HTML Code: <form action="/validate.php" method="post" id="myform"> <table width="100%" border="1"> ...

jqueryhtmlcss

When the button is clicked, a modal will pop up

Looking for help in incorporating JavaScript to create a responsive modal that pops up with lyrics when a button is pressed in a table. Any assistance would be greatly appreciated. Note: Only the code for the table has been provided. Let me know if you&ap ...

javascripthtmlcsshtml-tablemodal-dialog

Effective ways to position images within a card alongside a changing title

I have a requirement for displaying multiple cards with dynamic titles fetched from the backend. The challenge is to align images in a row regardless of the title length, ensuring alignment based on the longest title. Below is an illustration of what I am ...

javascripthtmlcsssass

Angular renders HTML elements

Greetings! I am currently experimenting with using AngularJS for the frontend and Wordpress as the backend of my project. To load content from Wordpress into Angular, I am utilizing a JSON wordpress plugin along with making $http requests. The content th ...

javascripthtmlwordpressangularjs

Height Difference Caused by Textarea Overflow with Auto Scrollbars

Displayed below is code that generates a textarea with 3 visible rows: <textarea id="txtInput" rows="3" cols="20" style="overflow:auto"></textarea> Unexpectedly, in Firefox (version 20.0.1), the textarea displays 4 rows instead of 3. To view ...

htmlcssfirefoxtextarea

Is it possible to use font-face in CSS3 to switch fonts for different languages?

Can I replace an Arabic font with a custom one using font-face in CSS3? I've successfully done it with English but I'm not sure if it's the same for foreign languages, so I wanted to check. Also, I feel silly asking this question, but I&apos ...

htmlcssfont-face

Choosing the anchor text in the second td element of a table using jQuery

I have a webpage with the following HTML structure... <input type=text id="search"> <table> <tr> <td></td> <td><a href="">Some text...</a></td> <td></td> </tr> </table> This co ...

jqueryhtml

Unable to properly connect my CSS file to the header partial

I am struggling to include my CSS file in the header partial Here is the link I am using: <link rel="stylesheet" href="stylesheets/app.css"> This is what my directory structure looks like: project models node_modules public stylesh ...

javascripthtmlcss