Font awesome not displaying correctly

Website Building
#1

Hey guys!

I have the following code and trying to implement a for loop to display a font awesome sticker on the page if the student has practice his or her piano but the sticker is going in a random direction and not in a straight line as shown below:

image
image.png1893Ă—928 53.5 KB

Here is my code:

![image|690x338](upload://1vnUchAwyDWNw2PLCAZewWBUdma.png)

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>


<?php
session_start();
include_once 'includes/dbh.php';
include_once 'header.php';

$sql = "SELECT * FROM practice_diary WHERE user_uid = ?;";

$stmt = mysqli_stmt_init($conn);
if (!mysqli_stmt_prepare($stmt, $sql)) {
	echo 'SQL error';
} else {
	mysqli_stmt_bind_param($stmt, "s", $_SESSION['u_uid']);
	mysqli_stmt_execute($stmt);
	$result = mysqli_stmt_get_result($stmt);
	$resultCheck = mysqli_num_rows($result);

    
	for ($i = 1; $i<= $resultCheck; $i++) {
		echo '<div class="star1">
             <i class="fas fa-star fa-10x"></i></div>';
             

	} 
}

?>

Do I have to format it with backticks here?

#2

Well, maybe the page does not fit all four lined up?

#3

I can get my point system now to work but the stickers are still not lining up correctly…Could it be a CSS issue? how would I do this to line it up if my class is fas?

I have changed the color however by doing this… I have used display: inline-block but the first star is not correctly shown…

.star1 {
display: inline-block;
color:blue;
}

It now looks like this but the first sticker is still way off

image
image.png1854Ă—951 59.2 KB

#4

@ckhawand Your feedback still needed here…

1 Like
#5

I can’t really help, since the website is hosted locally

#6

This is my main for loop code here…

for ($i = 1; $i<= $resultCheck; $i++) {     
		    
		    	echo '<div class="star1">
             <i class="fas fa-star fa-10x"></i></div>';
}

It is working fine and if I insert a new record, a star will appear but how would I reset the counter once the user has 10 stars? I tried to do this after the code but it just keep looping…

for ($i = 1; $i<= $resultCheck; $i++) {     
		    
		    	echo '<div class="star1">
             <i class="fas fa-star fa-10x"></i></div>'

if ($i ==5) {
   $i =0;
}

I thought that it should reset the counter back to 0 or 1

#7

I tried to do this after the code but it just keep looping…

Maybe this will help? break; keyword breaks loop execution.

for ($i = 1; $i<= $resultCheck; $i++) {     

	if ($i == 5) 
	{
		$i = 0;
		
		break;
	}
	
	echo '<div class="star1">
	<i class="fas fa-star fa-10x"></i></div>'
}
#8

Thanks… What is the difference between a for loop and a do while loop? I understand the code and the process but how would we know when to use either of them?

The breaks work but for some reason, the sticker is not appearing again. I am assuming that the counter is not reset to 0…

#9

I decided to give a random picture instead but how come the following code does not work with my points system? If i used $resultCheck instead of $x, then it doesn’t work but if I changed it back to $x, then it does work…

for ($x = 1; $x <= $resultCheck; $x++) {
            
            
		    
		    if ($x == $increment) {
                
               
                $increment += 5;
                $points += 100;
             	
             	$sql = "UPDATE rewards
                        Set reward_points = ?
                        WHERE user_uid = ?
             	       ";

             	$stmt = mysqli_stmt_init($conn);
				if (!mysqli_stmt_prepare($stmt, $sql)) {
					echo 'SQL error';
				} else {
					mysqli_stmt_bind_param($stmt, "is", $points, $_SESSION['u_uid']);
					mysqli_stmt_execute($stmt);
				             }
				         
				          }


                         }

but if I do this, then it does not work:

for ($x = 1; $x <= $resultCheck; $x++) {
            
            
		    
		    if ($resultCheck == $increment) {
                
               
                $increment += 5;
                $points += 100;
             	
             	$sql = "UPDATE rewards
                        Set reward_points = ?
                        WHERE user_uid = ?
             	       ";

             	$stmt = mysqli_stmt_init($conn);
				if (!mysqli_stmt_prepare($stmt, $sql)) {
					echo 'SQL error';
				} else {
					mysqli_stmt_bind_param($stmt, "is", $points, $_SESSION['u_uid']);
					mysqli_stmt_execute($stmt);
				             }
				         
				          }


                         }
#10

I can get my point system now to work but the stickers are still not lining up correctly…Could it be a CSS issue? how would I do this to line it up if my class is fas?

I have changed the color however by doing this… I have used display: inline-block but the first star is not correctly shown…

.star1 {
display: inline-block;
color:blue;
}

It now looks like this but the first sticker is still way off