# @fonticonpicker/fonticonpicker 中文文档

规范地址：https://npmcn.com/package/%40fonticonpicker/fonticonpicker/

版本：3\.1\.1
npm 元数据更新时间：2022-04-05T11:37:19.740Z
中文译文更新时间：2026-11-15T04:23:11.331Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40fonticonpicker/fonticonpicker
原文对照：https://npmcn.com/package/%40fonticonpicker/fonticonpicker/?lang=original
项目主页：https://fonticonpicker.github.io/
源码仓库：https://github.com/fontIconPicker/fontIconPicker

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：13.7 MB，24 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- Node.js 要求：\>=8\.0\.0
- 运行依赖：0 个
- peer 依赖：jquery \>=1\.12\.4
- 首次发布：2018-03-22T06:10:16.200Z
- 最新版本发布：2018-03-25T12:23:42.239Z
- 近 30 天下载量：15113（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：7（近 12 个月 0 个）

## 中文简介

j 查询插件,该插件允许您在管理表格中包含一个带有搜索和页标的简单的图标取取取器.

## 安装

```sh
npm install @fonticonpicker/fonticonpicker
```

也可以使用：`pnpm add @fonticonpicker/fonticonpicker`、`yarn add @fonticonpicker/fonticonpicker`、`bun add @fonticonpicker/fonticonpicker`

## README

# j 查询字体IconPicker `v3.1.1` [![Build Status](https://travis-ci.org/fontIconPicker/fontIconPicker.svg?branch=master)](https://travis-ci.org/fontIconPicker/fontIconPicker) [![Maintainability](https://api.codeclimate.com/v1/badges/701cba42caf2db204315/maintainability)](https://codeclimate.com/github/fontIconPicker/fontIconPicker/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/701cba42caf2db204315/test_coverage)](https://codeclimate.com/github/fontIconPicker/fontIconPicker/test_coverage) [![Cypress.io tests](https://img.shields.io/badge/cypress.io-tests-green.svg?style=flat-square)](https://dashboard.cypress.io/#/projects/agegn4/runs)

j 查询字体IconPicker 是一个小(`4.05KB` gzipped) j 查询插件, 允许您在管理表格中包含一个优雅的图标拾取器, 其中包含分类, 搜索和页标 。 图标列表可以手动加载 `SELECT` 字段,一个 `Array` 或者说 `Object` 图标或直接取自 Fontello `config.json` 或爱克月 `selection.json` 文档。 转到 [官方插件页面](https://fonticonpicker.github.io/) 用于实例和文件.

**字体Icon Picker 键 _ưμ㼯a_** 支持 j 查询 `1.12.4` 结束 `3.3.0`。 。 。 .

> 最初开发于 [micc83/fontIconPicker (英语)](https://github.com/micc83/fontIconPicker) 现在又分开了 [组织](https://github.com/fontIconPicker) 为了更好的合作.

![fontIconPickers](https://npmcn.com/package/%40fonticonpicker/fonticonpicker/github-img.png)

## 安装

### 与国家预防机制/也门

字体IconPicker已经通过国家预防机制发布。 所以你可以使用国家防范机制安装或下载 [释放](https://github.com/fontIconPicker/fontIconPicker/releases)。 。 。 .

```bash
npm install jquery@1.12.4 @fonticonpicker/fonticonpicker --save
```

现在使用网页包或浏览器.

```js
const jQuery = require( 'jquery' );
const fip = require( '@fonticonpicker/fonticonpicker' )( jQuery );

jQuery( '.selector' ).fontIconPicker( {
    // Options
} );
```

### 全球 `script` / CDN 支持

您可以将字体IconPicker依赖性直接放入您的 `html` 与 `<script>` 财务报告和审定财务报表 `<link>` 标签。 转到 [字体 IconPicker 释放](https://github.com/fontIconPicker/fontIconPicker/releases) 并下载 `fontIconPicker.zip` 来自最新资产的文件。 它将包含所有脚本和 用于生产的样式.

您也可以使用来自 [unpkg.com (英语)](https://unpkg.com/#/)。 。 。 .

```html
<!-- styles -->
<!-- base | always include -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@fonticonpicker/fonticonpicker/dist/css/base/jquery.fonticonpicker.min.css">

<!-- default grey-theme -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@fonticonpicker/fonticonpicker/dist/css/themes/grey-theme/jquery.fonticonpicker.grey.min.css">

<!-- optional themes | no need to include default theme -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@fonticonpicker/fonticonpicker/dist/css/themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@fonticonpicker/fonticonpicker/dist/css/themes/dark-grey-theme/jquery.fonticonpicker.darkgrey.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@fonticonpicker/fonticonpicker/dist/css/themes/inverted-theme/jquery.fonticonpicker.inverted.min.css">

<!-- scripts -->
<script type="text/javascript" src="https://unpkg.com/@fonticonpicker/fonticonpicker/dist/js/jquery.fonticonpicker.min.js"></script>
```

### 使用ES6模块

如果你想用的话 `ES6` 模块,然后必须手动初始化.

```js
import jQuery from 'jquery';
import initFontIconPicker from '@fonticonpicker/fonticonpicker';

// Initiate the jQuery plugin
initFontIconPicker( jQuery );

jQuery( '.selector' ).fontIconPicker( {
    // Options
} );
```

现在,唯一可行的 正确启动 `fontIconPicker` 结束 滚出j是直接通过 j 查询在 `initFontIconPicker` 函数。 若为 你知道更好的方法, 随意建议.

## 如何运作

只要包括 jQuery 的副本,字体 IconPickers 脚本,字体 IconPickers 主题和您的字体图标. 现在,你可以触发它在一个 `SELECT` 或者说 `INPUT[type="text"]` 键.

### 包含 Java 脚本

```html
<!-- jQuery -->
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>

<!-- fontIconPicker JS -->
<script type="text/javascript" src="js/jquery.fonticonpicker.min.js"></script>
```

### 包含 CSS

```html
<!-- fontIconPicker core CSS -->
<link rel="stylesheet" type="text/css" href="css/base/jquery.fonticonpicker.min.css" />

<!-- required default theme -->
<link rel="stylesheet" type="text/css" href="css/themes/grey-theme/jquery.fonticonpicker.grey.min.css" />

<!-- optional themes -->
<link rel="stylesheet" type="text/css" href="css/themes/dark-grey-theme/jquery.fonticonpicker.darkgrey.min.css" />
<link rel="stylesheet" type="text/css" href="css/themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/themes/inverted-theme/jquery.fonticonpicker.inverted.min.css" />
```

### 包含字体图标

```html
<!-- Font -->
<link rel="stylesheet" type="text/css" href="fontello-7275ca86/css/fontello.css" />
<link rel="stylesheet" type="text/css" href="icomoon/icomoon.css" />
```

### 以 j 查询初始化

最后给字体IconPicker打电话 `SELECT` 或者说 `INPUT[type="text"]` 键.

```html
<!-- SELECT element -->
<select id="myselect" name="myselect" class="myselect">
    <option value="">No icon</option>
    <option>icon-user</option>
    <option>icon-search</option>
    <option>icon-right-dir</option>
    <option>icon-star</option>
    <option>icon-cancel</option>
    <option>icon-help-circled</option>
    <option>icon-info-circled</option>
    <option>icon-eye</option>
    <option>icon-tag</option>
    <option>icon-bookmark</option>
    <option>icon-heart</option>
    <option>icon-thumbs-down-alt</option>
    <option>icon-upload-cloud</option>
    <option>icon-phone-squared</option>
    <option>icon-cog</option>
    <option>icon-wrench</option>
    <option>icon-volume-down</option>
    <option>icon-down-dir</option>
    <option>icon-up-dir</option>
    <option>icon-left-dir</option>
    <option>icon-thumbs-up-alt</option>
</select>
<!-- JavaScript -->
<script type="text/javascript">
    // Make sure to fire only when the DOM is ready
    jQuery(document).ready(function($) {
        $('#myselect').fontIconPicker(); // Load with default options
    });
</script>
```

```html
<!-- INPUT element -->
<input type="text" name="mytext" id="mytext" />
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('#mytext').fontIconPicker({
            source:    ['icon-heart', 'icon-search', 'icon-user', 'icon-tag', 'icon-help'],
            emptyIcon: false,
            hasSearch: false
        });
    });
</script>
```

## 插件选项

以下是字体IconPicker选项:

```js
var $picker = $('.picker').fontIconPicker({
    theme              : 'fip-grey',              // The CSS theme to use with this fontIconPicker. You can set different themes on multiple elements on the same page
    source             : false,                   // Icons source (array|false|object)
    emptyIcon          : true,                    // Empty icon should be shown?
    emptyIconValue     : '',                      // The value of the empty icon, change if you select has something else, say "none"
    autoClose          : true,                    // Whether or not to close the FIP automatically when clicked outside
    iconsPerPage       : 20,                      // Number of icons per page
    hasSearch          : true,                    // Is search enabled?
    searchSource       : false,                   // Give a manual search values. If using attributes then for proper search feature we also need to pass icon names under the same order of source
    appendTo           : 'self',                  // Where to append the selector popup. You can pass string selectors or jQuery objects
    useAttribute       : false,                   // Whether to use attribute selector for printing icons
    attributeName      : 'data-icon',             // HTML Attribute name
    convertToHex       : true,                    // Whether or not to convert to hexadecimal for attribute value. If true then please pass decimal integer value to the source (or as value="" attribute of the select field)
    allCategoryText    : 'From all categories',   // The text for the select all category option
    unCategorizedText  : 'Uncategorized',         // The text for the select uncategorized option
    iconGenerator      : null,                    // Icon Generator function. Passes, item, flipBoxTitle and index
    windowDebounceDelay: 150,                     // Debounce delay while fixing position on windowResize
    searchPlaceholder  : 'Search Icons'           // Placeholder for the search input
});
```

## 插件 APIs

字体IconPicker提供3个公共API来操纵图标取取器.

### 设置Icon () `String` 新Icon (英语)

使用这种方法在程序上设置图标 .

```js
$picker.setIcon( 'fa fa-arrow-down' );
```

### 设置Icons () `Array|Object` {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}新针头, `Array|Object` 图标搜索

使用这种方法来动态地改变苍蝇上的图标. `newIcons` 财务报告和审定财务报表 `iconSearch` (可选)数据类型与 `source` 财务报告和审定财务报表 `searchSource` 选项.

```js
$picker.setIcons(['icon-one', 'icon-two']);
$picker.setIcons(['icon-one', 'icon-two'], ['Icon one will be searched by this', 'Icon two will be searched by this']);
```

### 设置Page () `String|Number` 页: 1

使用这种方法在fip弹出中程序设定 pagination 。 这个 在打开状态和关闭状态之间持续,直到用户手动更改了页码.

```js
$picker.setPage( 2 );
$picker.setPage( 'first' );
$picker.setPage( 'last' );
```

方法接受数字,只有两个特殊的字符串.

-   数字对应从1开始的页码.
-   `first` 将会将页码设置为第一页.
-   `last` 将设置页码为最后一页.

### 销毁 Picker ()

用此来去掉图标取取器并恢复原始元素.

```js
$picker.destroyPicker();
```

### 刷新选择( T) `Object|Boolean` 新选项 )

从 DOM 或通过选项刷新图标拾取器 。 当DOM在调用毁灭方法或更改选项值后被更改或重新初始化时有用.

```js
$picker.refreshPicker({
    theme: 'fip-bootstrap',
    hasSearch: false
});
```

### 重新定位选择器( )

取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取 如果 DOM 已更改并下拉, 请使用此功能 打开。 或者,如果你的拾取器 在一个滚动容器.

```js
var picker = $('.myselect').fontIconPicker();
$('.mycontainer').on( 'scroll', function() {
    picker.repositionPicker();
} );
```

备选方案和API将在2008年1月1日至12月31日期间进行详细讨论 [项目页面](https://fonticonpicker.github.io/)。 。 。 .

### 本地演示的重要注释

仅在本地加载演示时 : 在Firefox字体IconPicker图标中,由于CORS,不会正确显示. 出于同样的原因,"从Fontello JSON config文件中获取的Load图标"在Chrome或IE 10上将无法工作. 如果您需要做一些本地测试, 您可以冒着风险禁用严格的 起源 政策 .

使用捆绑 [**浏览器**同步](https://browsersync.io/) 用于运行演示的服务器。 见 [设置](https://npmcn.com/package/%40fonticonpicker/fonticonpicker/#readme-setup) 学习如何.

## 浏览器兼容性

j 查询图标Picker已成功测试于:Firefox(对接)、Safari(对接)、Chrome(对接)、IE8+和Opera(对接).

## j 查询兼容性

`jQuery` 1.12.4 已定为 `peerDependencies` 输入 `package.json`我们有 测试 `1.x` 财务报告和审定财务报表 `3.x` 树枝。 jQuery 迁移不会产生任何错误 使用时 `3.x`。 。 。 .

## 发展环境

如果你想作出贡献,请记住一些事情.

-   任何代码都不应该产生ESLint和Stylelint的任何错误. 我们检查错误 如果它真的产生任何错误,它将被否决.
-   所有新的联署文件代码都应有单位或整合测试,并带有笑话.

### 设置

首先确保节点QQv8被安装. 然后复制仓库

```bash
git clone git@github.com:fontIconPicker/fontIconPicker.git
```

运行

```bash
cd fontIconPicker
npm install
npm install -g npx
```

这将安装所有依赖。 您不需要安装 `jquery` 就是这样 定义于 `devDependencies`。 。 。 .

现在编辑文件 `src` 需要的时候,请跑

```bash
npx gulp serve
```

这将服务于您的浏览器中的实时更改 。 打开它 `http://localhost:3000`。 。 。 .

### 编码标准

-   所有附加模块均应入内 `src/js/modules` 单位测试 `__tests__/unit`。 。 。 .
-   写联署材料 [ES6 标准](http://es6-features.org/#Constants)。 。 。 . [这个](https://es6.io/) 实值 学习的好地方 将会与贝贝尔一起编译.
-   不直接写入 CSS 文件 。 写入 [常设委员会](https://sass-lang.com/)它会 当 `npx gulp serve` 正在运行.
-   如果您正在写一个主题, 请在第一个框中包含 `demo/index.html`。 。 。 .
-   如果您正在写入一个选项或 API,请在单独的框中包含 `demo/index.html`。 。 。 .
-   联合来文的所有新特征都应有单位/整合和/或e2e测试。 我们用 [锡压](https://cypress.io/) 用于e2e测试和 [欢笑](https://facebook.github.io/jest/) 用于单位/整合测试.

### 自动接钩

当你跑的时候 `npm install` 这是第一次, [嘘](https://github.com/typicode/husky) 设置了几根钩子 具体来说 做两件事.

1.  检查是否正确 [发送消息](http://marionebl.github.io/commitlint/#/concepts-commit-conventions)。 。 。 .
2.  内嵌运行 `js` 财务报告和审定财务报表 `scss` 用于在按下前避免出错的文件.

### 持续整合( CI)

此外,我们运行测试服 每推 [法语科](https://travis-ci.org/fontIconPicker/fontIconPicker)。 。 。 .

让它跑来跑去

```bash
npm run test
```

当地在你的机器。 它会插入所有文件并运行 [`jest`](https://facebook.github.io/jest/) 测试.

### 正在本地测试

字体IconPicker有两套测试.

#### 单位和整合测试 [欢笑](https://facebook.github.io/jest/)

```bash
npx jest
```

#### 末端测试用 [锡压](https://www.cypress.io/)

```bash
npx cypress open
```

然后从应用程序中进行测试。 或者说

```bash
npx cypress run
```

从无头浏览器运行终端测试. 你没必要 担心设置测试环境 因为它是自动处理的 以 [锡压](https://www.cypress.io/)。 。 。 .

### 可用的 Gulp 命令

-   `default` - 构建所有脚本/样式并放入 `dist` 文件夹.
-   `build` - 和默认一样.
-   `lint` - 把CSS和JS的档案都记录下来.
    -   `lint:script` - 把JS的档案都记录下来.
    -   `lint:style` - 打开所有SCSS文件.
-   `fonts` - 复制字体文件到 `dist` 目录.
-   `serve` - 构建文件,init浏览器同步并监视文件以创建dev env.

用 [`npx`](https://www.npmjs.com/package/npx)。 。 。 .

## 贷项

j 查询字体IconPicker 由 [亚历山德罗·比诺伊特](http://codeb.it/) 打开 [洗手间](https://github.com/swashata)。 。 可以使用 [问题跟踪器](https://github.com/fontIconPicker/fontIconPicker/issues) 用于报告错误或特性请求.

> 特别感谢迷你MAC为这个想法,Zeno Rocha为jQuery插件锅炉板,Dave Gandy & KayaMoon为美丽的图标集,Elliot Condon为惊人的高级自定义场WordPress插件.

## 常见问题

### @fonticonpicker/fonticonpicker 是什么？

j 查询插件,该插件允许您在管理表格中包含一个带有搜索和页标的简单的图标取取取器\.

### 如何安装 @fonticonpicker/fonticonpicker？

在项目目录运行 npm install @fonticonpicker/fonticonpicker，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：jquery（\>=1\.12\.4）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @fonticonpicker/fonticonpicker 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/fonticonpicker\_\_fonticonpicker 是否存在。

### @fonticonpicker/fonticonpicker 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @fonticonpicker/fonticonpicker 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=8\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @fonticonpicker/fonticonpicker 可以商用吗？

@fonticonpicker/fonticonpicker 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @fonticonpicker/fonticonpicker 的下载量有多少？

根据 npm 官方下载统计，@fonticonpicker/fonticonpicker 在 2026/10/15 – 2026/11/13 这 30 天内被下载 15,113 次，日均约 504 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @fonticonpicker/fonticonpicker 还在维护吗？

最新版本 3\.1\.1 发布于 2018/03/25（8 年前）；至今共发布 7 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/03/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。