CSS: Insert icon in the second row of a flexbox-CodePudding

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 >
   <label for="wscsd_date_picker_display">Abo Start:</label>
   <div >
      <input type="date"  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?

CodePudding user response：



    .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 >
          <label for="wscsd_date_picker_display">Abo Start:</label>
          <div >
            <input
              type="date"
              
              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>