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

Exploring the World of 2D Array Animation

I'm in the process of creating a Pacman ghost using visual 2D arrays. I would like the ghost to move similar to this: https://i.sstatic.net/KPmUt.gif I am considering implementing CSS transitions for the movement, but I'm unsure about how to do ...

javascriptcssarrays

Ensuring consistent width for two divs using CSS

https://i.stack.imgur.com/3n8La.png I am currently working on creating a responsive CSS layout for two div elements. The first div will contain the summary, while the second div will hold the detailed description. My challenge is to make sure that the seco ...

css

Adjusting the position of an element when the width of its parent div shifts

Struggling with the challenge of absolute and relative positioning in CSS. My GUI allows users to view folders and select how many columns they appear in, as shown in the images provided. Beneath each folder is an input field for renaming and a clear butto ...

htmlcssangularjs

Link clicking causing webpage navigation issues

My web page features a table of contents, but unfortunately the page navigation is not functioning properly. Below is the HTML code: <a name="top_of_page">Create Account</a> <a href="#top_of_page">top</a> Even when I click on the ...

htmlnavigation

Generate a dynamic text-box and drop-down list using HTML and JavaScript

My current project involves generating dynamic text-boxes based on the selection from a drop-down list and input field. https://i.sstatic.net/CMtW9.png When a user chooses 'Option 1' from the drop-down list and enters input such as 'grass& ...

javascripthtmlvue.js

Out-of-sync movement in animated characters

Looking for some assistance with my page coding. I have a scenario where two stars are moving around a button, simulating an animation by incrementing the CSS properties top and left. Initially, everything appears fine and they move synchronously. However, ...

javascripthtmlcssanimation

How to Perfectly Align a Gif

I'm trying to understand the functionality behind this code snippet. Can anyone shed some light on it? img{ display:block; margin:auto; } I attempted to center a gif using this code block after my teacher suggested trying align:center; without succe ...

htmlcssmargin

divs aligned vertically on opposite edges of the webpage

Our web app is being embedded in a third party page as an iframe, but we need to add a bottom "toolbar" with 2 links. One link should be plain text and the other should display our company logo preceded by some text. We want the two links to be positioned ...

htmlcssvertical-alignment

Remove the bottom border from the active tab by utilizing the <div> and <a> elements

I am facing an issue with a tabbed menu on my webpage. While the menu is functioning correctly, I am struggling to remove the bottom border from the active tab. You can view all of my test code here. While I have come across solutions using <ul> an ...

javascripthtmlcss

Multiplication cannot be performed on operands of type 'NoneType'

Hello everyone, I am attempting to calculate the unit price and quantity from this table using the following model: class Marketers(models.Model): category =models.ForeignKey(Category, on_delete=models.CASCADE, null=True) name =models.CharField(max ...

javascripthtmlcssdjangobootstrap-4

Initializing an HTML5 video player directly from an Array

I am trying to populate a video player on my webpage with an array of videos. Here is the code I have so far: var current = 0; var videos = ["01", "02", "03", "04"]; function shuffle(array) { var currentIndex = array.length, temporaryValue, randomInde ...

javascriptarrayshtmlvideodynamic

Using the ng-app directive value with HTML and CSS can sometimes cause issues and the styles may not apply

angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=mainapp&p1=Error%3A…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A19%3A463) <body ng-app=""> It was working fine unt ...

cssangularjsng-app

What could be causing the fluctuation in ui-grid height as I scroll horizontally?

After using ui-grid in numerous projects without any issues, I recently encountered a strange issue when working with a large number of columns. With approximately 50 columns, as I scroll from left to right in order to view the columns that are off-screen ...

htmlangularjscssangular-ui-gridui-grid

A button that is positioned with a low z-index may be unresponsive to

I am working on aligning an image and a button next to each other so that the image slightly overlaps the button. However, I have noticed that in doing so, the button becomes unclickable. .button{z-index:-1!important;} .image{z-index:1!important;} Any s ...

css

Tips for dividing echo output from PHP into two separate divs using jQuery AJAX

I am trying to display two different echoes from PHP in separate divs within my AJAX success function. $.ajax({ url: 'counter.php', type: 'POST', data: { some_data:some_data ...

phphtmljqueryajax

What could be the reason why the border of my table displays in Firefox and Chrome, but remains hidden in Internet Explorer

I am facing an issue with getting a border to display on a table in Internet Explorer versions IE6, IE7, and IE8. The border is showing up fine in Chrome and Firefox but not in the mentioned IE versions. Below is the CSS code that I have been using: #info ...

htmlcssinternet-explorerfirefox

Verification of the data entered in the input box

I am looking to develop an Input Box where users can enter the private details of a person. The first character must be either A or E, and the rest can be alphanumeric with no special characters allowed. I need to implement validation on the client side to ...

javascriptjqueryhtml

Tips for effectively utilizing the Angular ngIf directive for toggling the visibility of elements

<div *ngFor = "let element of myElements, let i=index" [ngClass]="{'selected':element[i] == i}"> <li> Name: {{element.element.name}}</li> <li> Description: {{element.element.description}}</li ...

htmlcssangulartypescriptangular-directive

Is it advisable to avoid using XHTML elements, tags, and attributes that will not be included in the HTML 5 specification?

Given that I am currently utilizing XHTML 1.0 Strict, does it make sense to avoid using XHTML elements, tags, and attributes that are not included in the HTML5 specification? For example: <acronym> and <big> ...

xhtmlhtml

Connecting Bootstrap Tabs Dropdown to Website LinksIncorporating Bootstrap Tabs Dropdown Menu

Having an issue with my dropdown list in the Twitter Bootstrap tab - it's not responding when clicked. I've checked Stackoverflow for solutions but nothing has worked so far. I even tried removing the data-toggle='tab' attribute. Just ...

javascripthtmlcsstwitter-bootstrap