CODEWITHSUNDEEP
javascripthtmlcss
umer selmani
umer selmani

Reputation: 182

How to put FontAwesome in the value of the select tag

I have been searching how the FontAwesome can be implemented in the html files, though I have failed to come up with a result I want. Down below in the code, in the select tag I have tried some codes, except these I tried also with class instead of value.

I changed the js code too accordingly, and it failed to print what I wanted (it was printing the names and not the class [apparently I couldn't modify the code in a right way]). Usually, instead of having an icon, I end up having the text f the value i.e.'fa-windows' etc.

How can I handle the situation of the code. Below there is a picture, of what I want to achieve.

What I want

$(document).ready(function() {
  $(
    "select option[value=" + $("select option:selected").val() + "]"
  ).css({
    "background-color": "#0000ff",
    color: "#fff"
  });
  $("select").change(function() {
    $("select option")[0].value = $("select option:selected").val();
    $("select option")[0].innerHTML = $("select option:selected").val();
    $("select").val($("select option:selected").val());
    $("select option").css({
      "background-color": "",
      color: ""
    });
    $(
      "select option[value=" + $("select option:selected").val() + "]"
    ).css({
      "background-color": "#0000ff",
      color: "#fff"
    });
  });
});
select {
  font-family: 'FontAwesome', serif;
}

.capsul {
  position: relative;
  top: 420px;
  left: 100px;
  background: black;
  width: 180px;
  height: 45px;
  border-radius: 20px;
}

.operator {
  position: relative;
  background-color: transparent;
  color: #ef8354;
  font-weight: bolder;
  width: 60px;
  height: 30px;
  text-align: center;
  top: -83px;
  left: 102px;
  border: none;
}

.download-link {
  position: relative;
  top: -58px;
  text-decoration: none;
  color: #ef8354;
  font-weight: bolder;
  margin-left: 13px;
  padding: 6px;
}
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8" />
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="{% static 'blog/downloadbutton.css' %}">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="{% static " functionality/downloadbutton.js "%}"></script>
  <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">
</head>

<body>
  <div class=capsul>
    <a class="download-link" href="#">Download</a>
    <div>
      <label>
            <select class="operator">
              <option name="One" value="<i class='fa-windows'></i>">One</option>
              <option name="Two" value="2">Two</option>
              <option name="Three" value="3">Three</option>
              <option name="Four" value="fa fa-windows icon-default">Four</option>
            </select>
        </label>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Views: 102

Answers (1)

umer selmani
umer selmani

Reputation: 182

function styleselect() {
  var value = $('#globalstyleselect').val();
  var div = $("#stylediv");
  if (value == "3") {
    div.html('<i class="fa-linux"></i>');
  }
  if (value == "2") {
    div.html('<i class="fa-apple"></i>');
  }
  if (value == "1") {
    div.html('<i class="fa-windows">');
  }
}
i{
  font-family: FontAwesome;
}
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <title>Test</title>
      <link rel="stylesheet" type="text/css" href="{% static 'blog/downloadbutton.css' %}">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="{% static "functionality/downloadbutton.js"%}"></script>
      <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  </head>

  <body>
    <div class=capsul>
      <div  >
        <label>
            <select id="globalstyleselect" onchange="styleselect()">
              <option value="1">Terra</option>
              <option value="2">Bella </option>
              <option value="3">Boca</option>
            </select>

            <span id="stylediv"></span>
        </label>
    </div>
    </div>
  </body>
</html>

Upvotes: 1

Related Questions