Lenap Lenap - 5 months ago 40
CSS Question

css modified select arrow - font-awesome wont load

I want to edit a select-box but the arrow wont change I did include font-awesome in my page.

CSS



#editDocent{
background-color: white;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
}

#editDocent:after{
content: "\f063";
font-family: FontAwesome;
}


HTML & PHP



<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css">

<select id="editDocent">
<?php
$docentenQuery = mysqli_query($con, "SELECT * FROM users WHERE is_docent = '1'");
$docentenNumRows = mysqli_num_rows($docentenQuery);
$docentenResult = mysqli_fetch_assoc($docentenQuery);

foreach ($docentenQuery as $data) {
if ($data['id'] == $result2['id']) {
echo "<option data-id='" . $data['id'] . "' selected>" . $data["voornaam"] . " " . $data["achternaam"] . "</option>";
} else {
echo "<option data-id='" . $data['id'] . "'>" . $data["voornaam"] . " " . $data["achternaam"] . "</option>";
}
}
?>
</select>

Answer

You can not use before and after on html select elements, that's how it is!

#editDocent{
    background-color: white;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance:  none;
}

#editDocent:after{
    content: "\f063";
    font-family: FontAwesome;
}

<div id="editDocent">
    <select>
    <?php
    $docentenQuery = mysqli_query($con, "SELECT * FROM users WHERE is_docent = '1'");
    $docentenNumRows = mysqli_num_rows($docentenQuery);
    $docentenResult = mysqli_fetch_assoc($docentenQuery);

    foreach ($docentenQuery as $data) {
        if ($data['id'] == $result2['id']) {
            echo "<option data-id='" . $data['id'] . "' selected>" . $data["voornaam"] . " " . $data["achternaam"] . "</option>";
        } else {
            echo "<option data-id='" . $data['id'] . "'>" . $data["voornaam"] . " " . $data["achternaam"] . "</option>";
        }
    }
    ?>
    </select>
</div>