PHP Classes

Laravel Nova Text Field with Icon: Show a text field with custom icon in Laravel Nova

Recommend this page to a friend!
  Info   View files Documentation   View files View files (16)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not yet rated by the usersTotal: 51 All time: 10,596 This week: 96Up
Version License PHP version Categories
nova-text-field-with 1.0Custom (specified...5HTML, PHP 5, Libraries
Description 

Author

This package can be used to show a text field with custom icon in Laravel Nova.

It implements a form input field provider that can configure the presentation of a text field so it shows an icon image near it.

The package allows configuring the text icon alignment, color and relative position.

Innovation Award
PHP Programming Innovation award nominee
April 2019
Number 4
Icon images are useful to present in user interfaces because they help to convey function to the user interface elements that are near the icon images that they present.

This package can help presenting text input fields in a user interface generated using Laravel Nova by display given icons near those fields.

Manuel Lemos
Picture of Naif Alshaye
  Performance   Level  
Name: Naif Alshaye <contact>
Classes: 24 packages by
Country: Saudi Arabia Saudi Arabia
Innovation award
Innovation award
Nominee: 9x

Documentation

Nova text field with customizable font-awesome icons

A Laravel Nova text field with a custom icon

Installation:

You can install the package in to a Laravel app that uses Nova via composer:

composer require naif/text-with-icon

Usage:

<h4>Add the below to nova/resources/views/layout.blade.php</h4>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<h4>Add the below to Nova/User.php resource:</h4>


  TextWithIcon::make('test')
      ->icon('fab fa-twitter-square') //set icon full name. Browse icon gallery at https://fontawesome.com/icons?d=gallery&m=free
      ->position('in') //here you can set icon position to be inside or outside the text field.
      ->color('#1997EF'),//also you can set icon color
         

<img src="https://raw.githubusercontent.com/naifalshaye/nova-text-field-with-icon/master/screenshots/screenshot.png" width="700">

Support:

naif@naif.io

https://www.linkedin.com/in/naif

License:

The MIT License (MIT). Please see License File for more information.


  Files folder image Files  
File Role Description
Files folder imagedist (2 directories)
Files folder imageresources (2 directories)
Files folder imagescreenshots (1 file)
Files folder imagesrc (2 files)
Accessible without login Plain text file composer.json Data Auxiliary data
Accessible without login Plain text file LICENSE Lic. License text
Accessible without login Plain text file mix-manifest.json Data Auxiliary data
Accessible without login Plain text file package.json Data Auxiliary data
Accessible without login Plain text file README.md Doc. Documentation
Accessible without login Plain text file webpack.mix.js Data Auxiliary data

  Files folder image Files  /  dist  
File Role Description
Files folder imagecss (1 file)
Files folder imagejs (1 file)

  Files folder image Files  /  dist  /  css  
File Role Description
  Accessible without login Plain text file field.css Data Auxiliary data

  Files folder image Files  /  dist  /  js  
File Role Description
  Accessible without login Plain text file field.js Data Auxiliary data

  Files folder image Files  /  resources  
File Role Description
Files folder imagejs (1 file, 1 directory)
Files folder imagesass (1 file)

  Files folder image Files  /  resources  /  js  
File Role Description
Files folder imagecomponents (3 files)
  Accessible without login Plain text file field.js Data Auxiliary data

  Files folder image Files  /  resources  /  js  /  components  
File Role Description
  Accessible without login Plain text file DetailField.vue Data Auxiliary data
  Accessible without login Plain text file FormField.vue Data Auxiliary data
  Accessible without login Plain text file IndexField.vue Data Auxiliary data

  Files folder image Files  /  resources  /  sass  
File Role Description
  Accessible without login Plain text file field.scss Data Auxiliary data

  Files folder image Files  /  screenshots  
File Role Description
  Accessible without login Image file screenshot.png Data Auxiliary data

  Files folder image Files  /  src  
File Role Description
  Plain text file FieldServiceProvider.php Class Class source
  Plain text file TextWithIcon.php Class Class source

 Version Control Unique User Downloads Download Rankings  
 100%
Total:51
This week:0
All time:10,596
This week:96Up