Font Awesome Icon Picker 使用教程
fontawesome-iconpickerFont Awesome Icon Picker component for Bootstrap.项目地址:https://gitcode.com/gh_mirrors/fo/fontawesome-iconpicker
1. 项目的目录结构及介绍
fontawesome-iconpicker/
├── dist/
│ ├── fontawesome-5.11.2/
│ │ └── css/
│ │ └── all.min.css
│ ├── iconpicker-1.5.0.css
│ ├── iconpicker-1.5.0.js
│ └── iconpicker-1.5.0.json
├── src/
│ ├── css/
│ ├── js/
│ └── index.html
├── .gitignore
├── .npmignore
├── .travis.yml
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── Gruntfile.js
├── LICENSE
├── README.md
├── composer.json
├── index.html
├── package-lock.json
└── package.json
目录结构介绍
- dist/: 包含编译后的文件,如CSS、JavaScript和JSON文件。
- fontawesome-5.11.2/: Font Awesome 5.11.2 的CSS文件。
- iconpicker-1.5.0.css: Icon Picker 的CSS文件。
- iconpicker-1.5.0.js: Icon Picker 的JavaScript文件。
- iconpicker-1.5.0.json: Icon Picker 的JSON配置文件。
- src/: 包含源代码文件,如CSS、JavaScript和HTML文件。
- .gitignore: Git忽略文件配置。
- .npmignore: NPM忽略文件配置。
- .travis.yml: Travis CI配置文件。
- CODE_OF_CONDUCT.md: 行为准则文件。
- CONTRIBUTING.md: 贡献指南文件。
- Gruntfile.js: Grunt任务配置文件。
- LICENSE: 许可证文件。
- README.md: 项目说明文件。
- composer.json: Composer配置文件。
- index.html: 示例HTML文件。
- package-lock.json: NPM锁定文件。
- package.json: NPM配置文件。
2. 项目的启动文件介绍
启动文件
- index.html: 项目的示例HTML文件,展示了如何使用Icon Picker。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Awesome Icon Picker</title>
<link rel="stylesheet" href="/IconPicker/dist/fontawesome-5.11.2/css/all.min.css">
<link rel="stylesheet" href="/IconPicker/dist/iconpicker-1.5.0.css">
<script src="/IconPicker/dist/iconpicker-1.5.0.js"></script>
</head>
<body>
<button type="button" id="GetIconPicker" data-iconpicker-input="input#IconInput" data-iconpicker-preview="i#IconPreview">Select Icon</button>
<input type="hidden" id="IconInput" name="IconInput">
<i id="IconPreview"></i>
<script>
// 初始化Icon Picker
IconPicker.Init({
jsonUrl: '/IconPicker/dist/iconpicker-1.5.0.json',
searchPlaceholder: '搜索图标',
showAllButton: '显示全部',
cancelButton: '取消',
noResultsFound: '没有找到结果',
borderRadius: '20px'
});
IconPicker.Run('#GetIconPicker');
</script>
</body>
</html>
3. 项目的配置文件介绍
配置文件
- package.json: NPM配置文件,包含项目依赖、脚本和其他元数据。
示例配置
{
"name": "fontawesome-iconpicker",
"version": "1.5.0",
"description": "Font Awesome Icon Picker component for Bootstrap",
"main": "dist/iconpicker-1.5.0.js",
fontawesome-iconpickerFont Awesome Icon Picker component for Bootstrap.项目地址:https://gitcode.com/gh_mirrors/fo/fontawesome-iconpicker