asked on

How to properly use ion-icons in HTML?

Trying to use ion-icons. First time at it and not having much luck. The icon does appear on screen, but I can't access it at all. I'm not getting errors. Shouldn't this be easy? Hoping somebody can save my life.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="./_css/main.css" crossorigin="anonymous">

    <title>Email Input With Icon</title>
  </head>
  <body>

    <div class="c-email-wrapper"> 
      <form class="needs-validation form-box" novalidate method="post" action="mailto:doug@pricelearman.com" name="contactForm">
      <input type="hidden" name="env_report" value="REMOTE_HOST,REMOTE_ADDR,HTTP_USER_AGENT,AUTH_TYPE,REMOTE_USER" />
      <div class="form-row">
        <div class="col-sm-12">

          <div class="input-container form-group">
            <ion-icon name="md-arrow-forward"></ion-icon>
            <input type="text" class="form-control form-control-sm" placeholder="Enter your email" required>
          </div>

          <button type="submit" class="btn btn-primary">SEND</button>
        </div>
      </div>
    </form>
  </div>

  <script src="https://unpkg.com/ionicons@4.5.5/dist/ionicons.js"></script>
  </body>

</html>

Open in new window

.c-email-wrapper {
    display: block;
    position: relative;
    top: 10rem;
    left: 10rem;
    width: 50vw;
    max-width: 50vw;
}

.input-container {
  display: flex;
  width: 100%;
  margin-bottom: 15px;
}

ion-icon {
  padding: 10px;
  background: lightblue;
 font-size: 64px;
  color: red;
}

/*
.icon:after,
.icon:before {
    display: table;
    font-family: Ionicons;
    content: "\f280";

}
*/

.input-field {
  width: 100%;
  padding: 10px;
  outline: none;
}

.input-field:focus {
  border: 2px solid dodgerblue;
}


.btn {
  background-color: green;
  color: white;
  padding: 15px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.btn:hover {
  opacity: 1;
}

Open in new window

ASKER CERTIFIED SOLUTION

David Johnson, CD

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dlearman1

ASKER

I hate to hear it! I'm thinking the import must be working, else I wouldn't get the icon at all. I'm using a stripped down HTML already, Any thoughts on how to troubleshoot this issue?

Thanks for your input. looks like I can quit looking for that obvious but hidden mistake in the code.