IconPicker

偶像选择器

在您的HTML表单中使用字体Awesome Icons（字体Awesome Free V5.11.2）。 （1544个图标）

当前版本

1.5.0 *

网站和演示

https://furcan.*git*h*ub.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

IconPicker -input=\”input#IconInput\” data- IconPicker -preview=\”i#IconPreview\”>Select Icon</button>\”>

 < button type =\" button \" id =\" Get IconPicker \" data- IconPicker -input =\" input#IconInput \" data- IconPicker -preview =\" i#IconPreview \" > Select Icon </ button > 

4-初始化

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
});\”>

 // 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-运行

IconPicker \’);\”>

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

5.2-使用回调功能（v1.4.0和下一个版本）运行

IconPicker \’, function(){

// codes…
console.log(\’Icon Picker\’);

});
\”>

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

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

版权

版权所有©2019 Icon Picker

执照

麻省理工学院许可证-https：//opensource.org/licenses/mit