Bootstrap 4 Advanced Components : add an icon to placeholder for Bootstrap 4 Daemonite

Bootstrap 4 Advanced Components : 7 ways to add an icon to an input field for Bootstrap 4 and Daemonite material UI

by djibe89

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://daemonite.github.io/material/css/material.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.bundle.min.js"></script>
<script src="https://daemonite.github.io/material/js/material.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="row my-4">
    <div class="col">
      <div class="jumbotron">
        <h1>7 ways to use Material or FontAwesome icons as placeholder in form for Bootstrap 4 - Advanced Components with daemonite material UI</h1>
        <p class="lead">by djibe.</p>
        <p class="text-muted">(thx to BS4 + Daemonite Material Design)</p>
        <h2 class="lead">
          Want to add icons to your text fields (form inputs) ? You can see all the possible ways here. You can use FontAwesome icons or Material Icons as you like. You can add icons to the placeholder or simpply before or within the input field.
        </h2>
        <p class="lead">
          If you see this page unstyled, press Ctrl + F5 to reload it.
        </p>
        <h2>Setup</h2>
        <ol>
          <li>Add Fontawesome or material icon CSS to your project <code>
            &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
          </code>
          </li>
          <li>
            Find the material icon (Or FontAwesome) you need here : <a href="https://shanfan.github.io/material-icons-cheatsheet/" target="_blank">https://shanfan.github.io/material-icons-cheatsheet/</a>.<br> In my case I'l look for the search icon.<br>            The site reveals all the matching icons for your equest.<br> Click on the one you...

CSS

/* Use this if you use icon embedded in placeholder (examples 1 & 2) */

.form-control-placeholdericon {
  font-family: Roboto, FontAwesome, 'Material Icons';
}

/* Use this if you use icon added with pure CSS (example 3) */

[class*="form-group-icon-"] {
  position: relative;
}

[class*="form-group-icon-"]>input {
  padding-left: 32px;
}

[class*="form-group-icon-"]:before {
  font-family: 'Material Icons';
  position: absolute;
  color: rgba(0, 0, 0, .54);
  left: 0;
  bottom: 0;
  font-size: 24px;
}

.form-group-icon-search:before {
  content: '\e8b6';
}

/* Use this if you use icon added with HTML tag (example 4) */

.form-group-icon {
  position: relative;
}

.form-group-icon>input {
  padding-left: 32px;
}

.form-group-icon>i {
  position: absolute;
  color: rgba(0, 0, 0, .54);
  left: 0;
  bottom: calc(0.375rem - 1px);
}

/* Use this if you append icon added with HTML tag (example 5) */
.form-icon-append {
  position: relative;
}

.form-icon-append>input {
  padding-right: 32px;
}

.form-icon-append>i {
  position: absolute;
  color: rgba(0, 0, 0, .54);
  right: 0;
  bottom: calc(0.375rem - 1px);
}
.form-icon-append>i:hover {
  cursor: pointer;
}