IconPickerダウンロードIconPickerソースコードのダウンロード

IconPicker

フォントのダウンロード

v1.5.0

ダウンロード

アイコンピッカー

HTMLフォームでフォントの素晴らしいアイコン（Font Awesome Free V5.11.2）を使用してください。（1544アイコン）

現在のバージョン

1.5.0 *

ウェブサイトとデモ

https://furcan.github.io/iconpicker/

インストール

npm

 npm i @furcan/iconpicker

糸

 yarn add @furcan/iconpicker

1- CSS

 < link rel =" stylesheet " href =" dist/fontawesome-5.11.2/css/all.min.css " />

< link rel =" stylesheet " href =" dist/iconpicker-1.5.0.css " />

2- JavaScript

 < script src =" dist/iconpicker-1.5.0.js " > </ script >

3- HTML

 < button type =" button " id =" GetIconPicker " data-iconpicker-input =" input#IconInput " data-iconpicker-preview =" i#IconPreview " > Select Icon </ button >

4- init

 // Default options
IconPicker . Init ( {
  // Required: You have to set the path of IconPicker JSON file to "jsonUrl" option. e.g. '/content/plugins/IconPicker/dist/iconpicker-1.5.0.json'
  jsonUrl : null ,
  // Optional: Change the buttons or search placeholder text according to the language.
  searchPlaceholder : 'Search Icon' ,
  showAllButton : 'Show All' ,
  cancelButton : 'Cancel' ,
  noResultsFound : 'No results found.' , // v1.5.0 and the next versions
  borderRadius : '20px' , // v1.5.0 and the next versions
} ) ;

5.1-実行

 // Select your Button element (ID or Class)
IconPicker . Run ( '#GetIconPicker' ) ;

5.2-コールバック関数（v1.4.0および次のバージョン）で実行する

 // @param1 => Select your Button element (ID or Class)
// @param2 => A Callback Function can be used after than an icon selected on the list.

IconPicker . Run ( '#GetIconPicker' , function ( ) {
    
    // codes...
    console . log ( 'Icon Picker' ) ;
    
} ) ;