We have a problem on our page. We use a plugin for choosing a startdate, but this plugin does not display the calandar icon for choose the date. All is working except the calandar icon to show to the customer that he can click. Now we try to insert a icon in the second row of the flex box.
.wscsd_calendar_dates_field::after {
content: "\f073";
}
But with this, it adds a new row to the flexbox and displays the icon. But we want to have it in the second one becasue the user can click there to open the date chooser.
This is the HTML structure we have...
<div class="wscsd_date_picker">
<label for="wscsd_date_picker_display">Abo Start:</label>
<div class="wscsd_date_picker">
<input type="date" class="short wscsd_calendar_dates_field" style="" id="wscsd_start_date" name="wscsd_start_date" min="2022-02-06" value="2022-02-06" placeholder="2022-02-06">
</div>
</div>
How can we do this?
.wscsd_calendar_dates_field::after {
content: "\f073";
font-family: "Font Awesome 5 Free";
font-weight: 900;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="wscsd_date_picker">
<label for="wscsd_date_picker_display">Abo Start:</label>
<div class="wscsd_date_picker">
<input
type="date"
class="short wscsd_calendar_dates_field"
style=""
id="wscsd_start_date"
name="wscsd_start_date"
min="2022-02-06"
value="2022-02-06"
placeholder="2022-02-06"
/>
</div>
</div>
</body>
</html>