icon-input v1.2.0

IconInput

This library was generated with Angular CLI version 11.2.14.

Installation

Run npm i -s icon-input@latest to add latest version of icon-input package. It contains a font-awesome-input component. Thanks to Angular University

Dependencies

npm i -s @fortawesome/angular-fontawesome
npm i -s @fortawesome/fontawesome-svg-core
npm i -s @fortawesome/free-solid-svg-icons

npm i -s icon-input@latest

Parameters

  @Input()
  icon: IconDefinition;

  @Input()
  outline: boolean = true;

Demo

Application

http://www.vincentluc.biz/

Repository

https://github.com/vluc3/icon-input-tester

Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

import { FontAwesomeInputModule } from 'icon-input';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    FontAwesomeModule,
    FontAwesomeInputModule
  ],
  exports: [
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Component

import { Component } from '@angular/core';

import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
import { faUser, faEnvelope, faLock, faGlobe, faShoppingBag, faSkiingNordic } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  userIcon: IconDefinition = faUser;
  envelopeIcon: IconDefinition = faEnvelope;
  lockIcon: IconDefinition = faLock;
  globeIcon: IconDefinition = faGlobe;
  shoppingBagIcon: IconDefinition = faShoppingBag;
  skiingNordicIcon: IconDefinition = faSkiingNordic;
}

Template

<div class="container">
  <h1>Font Awesome Input</h1>
  <div class="form">
    <div class="form-row">
      <label>Name (Default theme)</label>
      <font-awesome-input
        [icon]="userIcon">
        <input
          type="text"
          placeholder="Name"
          autocomplete="off"
        />
      </font-awesome-input>
    </div>

    <div class="form-row email">
      <label>Email (Custom theme)</label>
      <font-awesome-input
        [icon]="envelopeIcon">
        <input
          type="email"
          placeholder="Email"
          autocomplete="off"
        />
      </font-awesome-input>
    </div>

    <div class="form-row font-awesome-input-blue-theme">
      <label>Password (Blue theme)</label>
      <font-awesome-input
        [icon]="lockIcon">
        <input
          type="password"
          placeholder="Password"
          autocomplete="off"
        />
      </font-awesome-input>
    </div>

    <div class="form-row stripe">
      <label>Stripe (Custom theme)</label>
      <font-awesome-input
        [icon]="globeIcon"
        [outline]="false">
        <input
          type="text"
          placeholder="Stripe"
          autocomplete="off"
        />
      </font-awesome-input>
    </div>

    <div class="form-row font-awesome-input-red-theme">
      <label>Paypal (Red theme)</label>
      <font-awesome-input
        [icon]="shoppingBagIcon">
        <input
          type="text"
          placeholder="Paypal"
          autocomplete="off"
        />
      </font-awesome-input>
    </div>

    <div class="form-row font-awesome-input-readonly-theme">
      <label>Sport (Readonly theme)</label>
      <font-awesome-input
        [icon]="skiingNordicIcon">
        <input
          type="email"
          placeholder="Sport"
          autocomplete="off"
          readonly
        />
      </font-awesome-input>
    </div>
  </div>
</div>

Style

h1 {
  text-align: center;
  margin-bottom: 30px;
  margin-top: 50px;
}

.container {
  margin: 0 auto;
  max-width: 800px;
  padding-top: 65px;
}

.form-row {
  width: 800px;
  margin-bottom: 10px;
}

label {
  width: 250px;
  text-align: right;
  padding-right: 5px;
}

.email font-awesome-input {
  height: 40px;
  background-color: cornsilk;
  border-color: darkgoldenrod;
  border-radius: 3px;
}

.email font-awesome-input input {
  width: 300px;
}

.email font-awesome-input.input-focused {
  box-shadow: 0 0 5px darkgoldenrod;
  -webkit-box-shadow: 0 0 5px darkgoldenrod;
}

.email font-awesome-input input:-webkit-autofill,
.email font-awesome-input input:-webkit-autofill:hover,
.email font-awesome-input input:-webkit-autofill:focus,
.email font-awesome-input input:-webkit-autofill:active {
  box-shadow: 0 0 0 40px cornsilk inset !important;
  -webkit-box-shadow: 0 0 0 40px cornsilk inset !important;
}

.stripe font-awesome-input {
  border: 1px solid lightseagreen;
}