IconPicker

字体下载 2025-08-10

偶像选择器

在您的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

下载源码

通过命令行克隆项目:

git clone https://github.com/furcan/IconPicker.git