voting system

Question

voting system

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

1

I'm making a website and I would like it to have a voting system, but I did not want it to be with stars but rather with coffee cups (I picked up this site: font-awesome). But I can not leave it with the cupcakes, it's always 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><?phpif(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>

style.css

.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

asked by anonymous 29.11.2017 / 19:10

3 answers

1

In the .css file, replace the \ f005 star character with the \ f0f4 coffee cup:

.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><formmethod="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>

29.11.2017 / 19:33

0

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

You have two alternatives. 1) Replace:

content: '\ f005';

For the correct icon content:

content: '\ f0f4';

Or

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

Icon font: link

29.11.2017 / 19:25

How to send a GIF in Whatsapp programmatically on Android? Friendly URL with JQuery

score 0 · Accepted Answer

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><linkrel="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><formmethod="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>