voting system

Asked

Viewed 115 times

1

I’m making a website and I would like to have a voting system, but I didn’t want it to be with stars but with coffee cups (I got it from this site: font-awesome). But I can’t leave it to the girls, it always looks like a star.

index php.

<html lang="pt-br">
<head>
   <meta charset="utf-8">
   <title></title>
   <link rel="stylesheet" href="estilo.css">
   <script src="https://use.fontawesome.com/eb2dfeaa2c.js"></script>
</head>
<body>
   <h1>Avalie</h1>
   <?php
   if(isset($_SESSION['msg'])){
      echo $_SESSION['msg']."<br><br>";
      unset($_SESSION['msg']);
   }
   ?>
   <form method="POST" action="processa.php" enctype="multipart/form-data">
      <div class="estrelas">
         <input type="radio" id="vazio" name="estrela" value="" checked>

         <label for="estrela_um" ><i class="fa fa-coffee" aria-hidden="true"></i></label>

         <input type="radio" id="estrela_um" name="estrela" value="1">

         <label for="estrela_dois" ><i class="fa fa-coffee" aria-hidden="true"></i></label>
         <input type="radio" id="estrela_dois" name="estrela" value="2">

         <label for="estrela_tres"><i class="fa fa-coffee" aria-hidden="true"></i></label>
         <input type="radio" id="estrela_tres" name="estrela" value="3">

         <label for="estrela_quatro"><i class="fa fa-coffee" aria-hidden="true"></i></label>
         <input type="radio" id="estrela_quatro" name="estrela" value="4">

         <label for="estrela_cinco"><i class="fa fa-coffee" aria-hidden="true"></i></label>
         <input type="radio" id="estrela_cinco" name="estrela" value="5"><br><br>

         <input type="submit" value="Cadastrar"> <label for="estrela_um" ><i class="fa fa-coffee" aria-hidden="true"></i></label>
      </div>
   </form>
</body>
</html>

css style.

.estrelas input[type=radio]{
display: none;
}.estrelas label i.fa:before{
content: '\f005';
color: #FC0;
}.estrelas  input[type=radio]:checked  ~ label i.fa:before{
color: #CCC;
}
php css

3 answers

1

Inside the archive .css, replace the star character \f005 by the cup of coffee \f0f4:

.estrelas input[type=radio] {
  display: none;
}

.estrelas label i.fa:before {
  content: '\f0f4';
  color: #FC0;
}

.estrelas input[type=radio]:checked ~ label i.fa:before {
  color: #CCC;
}
<script src="https://use.fontawesome.com/eb2dfeaa2c.js"></script>

<body>
  <h1>Avalie</h1>
  <form method="POST" action="processa.php" enctype="multipart/form-data">
<div class="estrelas">
  <input type="radio" id="vazio" name="estrela" value="" checked>

  <label for="estrela_um"><i class="fa fa-coffee" aria-hidden="true"></i></label>

  <input type="radio" id="estrela_um" name="estrela" value="1">

  <label for="estrela_dois"><i class="fa fa-coffee" aria-hidden="true"></i></label>
  <input type="radio" id="estrela_dois" name="estrela" value="2">

  <label for="estrela_tres"><i class="fa fa-coffee" aria-hidden="true"></i></label>
  <input type="radio" id="estrela_tres" name="estrela" value="3">

  <label for="estrela_quatro"><i class="fa fa-coffee" aria-hidden="true"></i></label>
  <input type="radio" id="estrela_quatro" name="estrela" value="4">

  <label for="estrela_cinco"><i class="fa fa-coffee" aria-hidden="true"></i></label>
  <input type="radio" id="estrela_cinco" name="estrela" value="5">
  <br>
  <br>

  <input type="submit" value="Cadastrar">

</div>
  </form>
</body>

0


Change the star code \f005 by the cup of coffee \f0f4:

.estrelas input[type=radio]{
display: none;
}.estrelas label i.fa:before{
content: '\f0f4';
color: #FC0;
}.estrelas  input[type=radio]:checked  ~ label i.fa:before{
color: #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/eb2dfeaa2c.js"></script>
<h1>Avalie</h1>
<form method="POST" action="processa.php" enctype="multipart/form-data">
   <div class="estrelas">
      <input type="radio" id="vazio" name="estrela" value="" checked>

      <label for="estrela_um" ><i class="fa fa-coffee" aria-hidden="true"></i></label>
      
      <input type="radio" id="estrela_um" name="estrela" value="1">
      
      <label for="estrela_dois" ><i class="fa fa-coffee" aria-hidden="true"></i></label>
      <input type="radio" id="estrela_dois" name="estrela" value="2">
      
      <label for="estrela_tres"><i class="fa fa-coffee" aria-hidden="true"></i></label>
      <input type="radio" id="estrela_tres" name="estrela" value="3">
      
      <label for="estrela_quatro"><i class="fa fa-coffee" aria-hidden="true"></i></label>
      <input type="radio" id="estrela_quatro" name="estrela" value="4">
      
      <label for="estrela_cinco"><i class="fa fa-coffee" aria-hidden="true"></i></label>
      <input type="radio" id="estrela_cinco" name="estrela" value="5"><br><br>
      
      <input type="submit" value="Cadastrar"> <label for="estrela_um" ><i class="fa fa-coffee" aria-hidden="true"></i></label>
   </div>
</form>

  • How strange, in my computer modified for the cup, but it does not change color as it appears when I execute the code you sent me... (when I put to execute your code in the stackoverflow itself works right)

  • @fer View library versions of my reply and compare them to the ones you use.

  • I got it. Thank you

0

This happens because you are calling in your CSS a "content" equivalent to the coffee icon.

You have two alternatives.
1) To replace:

content: ' f005';

By the content of the correct icon:

content: 'f0f4';

Or

2) Remove the "content" of its code, since it is already called in the Font Awesome class.

Icon source: http://fontawesome.io/icon/coffee/

Browser other questions tagged php css

You are not signed in. Login or sign up in order to post.