偶像选择器
在您的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