css 修改了 select 箭头 - font-awesome 不会加载

Question

我想编辑一个 select 框，但箭头不会改变我确实在我的页面中包含了很棒的字体。

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 1

你不能在 html select 元素上使用 before 和 after，就是这样！

#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>

css 修改了 select 箭头 - font-awesome 不会加载

css modified select arrow - font-awesome wont load

css

font-awesome

CSS

HTML & PHP